星空网 > 软件开发 > 网页设计

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='/images/loading.gif' data-original="http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg"  id="img1" />24 25 <script src='/images/loading.gif' data-original="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");

 




原标题:HTML5元素拖拽实现示例

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

海运fba加拿大:https://www.goluckyvip.com/tag/33537.html
海运fba价格:https://www.goluckyvip.com/tag/33538.html
海运fba快船:https://www.goluckyvip.com/tag/33539.html
海外仓:https://www.goluckyvip.com/tag/3354.html
海运fba美国:https://www.goluckyvip.com/tag/33540.html
海运fba日本:https://www.goluckyvip.com/tag/33541.html
在古巴做游轮 古巴旅游项目:https://www.vstour.cn/a/363194.html
西藏旅游攻略自驾游需要多少天 去西藏旅游自驾游要多久时间:https://www.vstour.cn/a/363195.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流