你的位置:首页 > 网页设计

[网页设计]HTML5元素拖拽实现示例


HTML5现在前端圈中,已然成为一个不那么新的技术词汇了,很多公司也把HTML5也当成了硬性的技能要求,但是很多前端恐怕都不了解HTML5的拖拽怎么实现吧。

看了下极客学院的视频,大概的了解了下思路。所以整理备份,便于以后查阅。先上示例:

index.html

 1 <!doctype html> 2 <html> 3 <head> 4   <meta charset="UTF-8"> 5   <title>Drag</title> 6   <style> 7     .box{ 8       width: 400px; 9       height: 400px;10       float: left;11     }12     #box1{13       background: #CCC;14     }15     #box2{16       background: #FF0;17     }18   </style>19 </head>20 <body>21 <div id="box1" class="box"></div>22 <div id="box2" class="box"></div>23 <img src="http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />24 25 <script src="app1.js"></script>26 </body>27 </html>

 

 

app1.js

 1 /** 2  *  app1.js 3 */ 4  5 var oBox1, 6   oBox2, 7   oImg1; 8  9 window.onload = function(){10   oBox1 = document.getElementById('box1');11   oBox2 = document.getElementById('box2');12   oImg1 = document.getElementById('img1');13 14   //15   oBox1.ondragover = oBox2.ondragover = function(e){16     e.preventDefault();17   };18 19   //20   oImg1.ondragstart = function(e){21     e.dataTransfer.setData('text', e.target.id);22   };23 24   oBox1.ondrop = dropImg;25   oBox2.ondrop = dropImg;26 };27 28 function dropImg(e){29   e.preventDefault();30   var tempImg = document.getElementById(e.dataTransfer.getData('text'));31   e.target.appendChild(tempImg);32 }

 

涉及知识点

在拖放的过程中会触发以下事件:
在拖动目标上触发事件 (源元素)
  ondragstart - 用户开始拖动元素时触发
  ondrag - 元素正在拖动时触发
  ondragend - 用户完成元素拖动后触发

释放目标时触发的事件
  ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

 

event对象(以e代替)

e.target

  W3Cschool上的解释是:返回触发此事件的元素(事件的目标节点),这个target属性只兼容ie9及以上

e.preventDefault()

  取消事件的默认动作。

e.dataTransfer.setData()

  设置被拖数据的数据类型和值。

e.dataTransfer.setData("Text",ev.target.id);    //第一个参数为Text(小写的也行)

e.dataTransfer.getData()

  获得被拖的数据。

e.dataTransfer.getData("Text");