首页 > Web开发 > 详细

HTML5 拖放

时间:2017-03-03 10:53:47      阅读:216      评论:0      收藏:0      [点我收藏+]
HTML5拖放
1.HTML5拖放:拖放(drag和drop)是HTML5标准组成部分。
2.拖动开始:ondragstart : 调用了一个函数,drag(event),它规定了被拖动的数据
3.设置拖动数据:setData():设置被拖数据的数据类型和值
4.放入位置:ondragover:事件规定在何处放置被拖动的数据
5.放置:ondrop:当放置被拖数据时,会发生drop事件
 
组织系统的默认操作
box1Div.ondragover=function(e){
     e.preventDefault();
}
 
<style>
        .box{
            width: 400px;
            height:400px;
        }
        #box1{
            float: left;
            background-color: #2E9035;
        }
        #box2{
            float: left;
            background-color: #CC6699;
        }
    </style>
    <script src="app.js"></script>
</head>
<body>
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>
    <img id="img1" src="meinv.jpg">
    <div id="msg"></div>
</body>
 
var box1Div,box2Div,msgDiv,img1;
 
window.onload=function(){
    box1Div=document.getElementById("box1");
    box2Div=document.getElementById("box2");
    msgDiv=document.getElementById("msg");
    img1=document.getElementById("img1");
    //取消默认操作
    box1Div.ondragover=function(e){
        e.preventDefault();
    }
    box2Div.ondragover=function(e){
        e.preventDefault();
    }
    //获取到数据
    img1.ondragstart=function(e){
        e.dataTransfer.setData("imgId","img1");
    }
    box1Div.ondrop=dropImghandler;
    box2Div.ondrop=dropImghandler;
}
function dropImghandler(e){
    showObj(e.dataTransfer);
    e.preventDefault();
    var img=document.getElementById(e.dataTransfer.getData("imgId"));
    e.target.appendChild(img);
}
function showObj(obj){
    var s=""
    for(var k in obj){
      s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML=s;
}
技术分享
拖放本地数据
 
<style>
        #imgContainer{
           
            width: 500px;
            height: 500px;
        }
    </style>
    <script src="app.js"></script>
</head>
<body>
    <div id="imgContainer"></div>
    <div id="msg"></div>
</body>
 
var imgContainer,msgDiv;
 
window.onload=function(){
    imgContainer=document.getElementById("imgContainer");
    msgDiv=document.getElementById("msg");
 
    imgContainer.ondragover=function(e){
        e.preventDefault();
    }
    imgContainer.ondrop=function(e){
        e.preventDefault();
        var f= e.dataTransfer.files[0];
        var fileReader=new FileReader();
        fileReader.onload=function(e){
            imgContainer.innerHTML="<img src=\""+fileReader.result+"\">"
        }
        fileReader.readAsDataURL(f);
    }
}
 
function showObj(obj){
    var s=""
    for(var k in obj){
      s+=k+":"+obj[k]+"<br/>"
    }
    msgDiv.innerHTML=s;
}
技术分享
 
 
 
 
 
 

HTML5 拖放

原文:http://www.cnblogs.com/baixuemin/p/6495108.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!