html5拖放

最新推荐文章于 2024-04-20 11:06:33 发布

月轩居士

最新推荐文章于 2024-04-20 11:06:33 发布

阅读量421

点赞数

分类专栏： Html5，Css3

Html5，Css3 专栏收录该内容

16 篇文章

订阅专栏

1.HTML5拖放：

拖放(drag ,drop)是HTML5标准的组成部分。

2.拖动开始：

ondragstart:调用了一个函数，drag(event),它规定了被拖动的数据。

3.设置拖放数据：

setData():设置被拖放的数据类型和值。

4.放入位置：

ondragover:事件规定在何处放置被拖动的数据。

5.放置：

ondrop:当放置被拖动数据时，会发生drop事件。

实例代码如下：

（1）HTML文件代码如下：

[html]view plain copy 
   
 print?
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>拖放</title>  
         <style>  
             .box{  
                 width: 400px;  
                 height: 400px;  
             }  
   
             #box1{  
                 background-color: #cccccc;  
                 float: left;  
             }  
   
             #box2{  
                 background-color: aquamarine;  
                 float: left;  
             }  
   
         </style>  
     <script src="app.js"></script>  
   
 </head>  
 <body>  
   
     <div id="box1" class="box"></div>  
     <div id="box2" class="box"></div>  
     <img id="img1" src="1.png">  
     <div id="msg"></div>  
   
 </body>  
 </html>  

（2）JS文件代码如下：

[javascript]view plain copy 
   
 print?
 /** 
  * Created by chenyufeng on 15/9/28. 
  */  
   
   
 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.ondragenter = function(e){  
     //    showObj(e);  
     //}  
   
     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;  
 }  

实现效果如下：

。