·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]html5拖放动作的源代码范例(拖动事件)

时间:2017-03-21 16:51酷播
[html5]html5拖放动作的源代码范例(拖动事件)

拖动事件

dragstart:网页元素开始拖动时触发。

drag:被拖动的元素在拖动过程中持续触发。

dragenter:被拖动的元素进入目标元素时触发,应在目标元素监听该事件。

dragleave:被拖动的元素离开目标元素时触发,应在目标元素监听该事件。

dragover:被拖动元素停留在目标元素之中时持续触发,应在目标元素监听该事件。

drap:被拖动元素或从文件系统选中的文件,拖放落下时触发。

dragend:网页元素拖动结束时触发。

注意:以上这些事件都可以指定回调函数。

  1. <ul id="drags">  
  2.     <li draggable="true">A</li>  
  3.     <li draggable="true">B</li>  
  4.     <li draggable="true">C</li>  
  5. </ul>  
  6. <ul id="drops"></ul> 

 

  1. <script type="text/javascript">  
  2. //获取目标元素  
  3. var target = document.querySelector('#drops');  
  4. //获取需要拖放的元素  
  5. var dragElements = document.querySelectorAll('#drags li');  
  6. //临时记录被拖放的元素  
  7. var elementDragged = null;  
  8. //循环监听被拖放元素的开始拖放和结束拖放事件  
  9. for (var i = 0; i < dragElements.length; i++) {  
  10.     //开始拖放事件监听  
  11.     dragElements[i].addEventListener('dragstart', function(e) {  
  12.         //设置当前拖放元素的数据参数  
  13.         e.dataTransfer.setData('text', this.innerHTML);  
  14.         //保存当前拖放对象  
  15.         elementDragged = this;  
  16.     });  
  17.     //结束拖放事件监听  
  18.     dragElements[i].addEventListener('dragend', function(e) {  
  19.         //注销当前拖放对象  
  20.         elementDragged = null;  
  21.     });  
  22. }  
  23. //目标元素监听被拖放元素进入事件  
  24. target.addEventListener('dragover', function(e) {  
  25.     //阻止浏览器默认行为  
  26.     e.preventDefault();  
  27.     //设置鼠标样式  
  28.     e.dataTransfer.dropEffect = 'move';  
  29.     return false;  
  30. });  
  31. //目标元素监听当被拖放元素落下时刻事件  
  32. target.addEventListener('drop', function(e) {  
  33.     //阻止默认行为  
  34.     e.preventDefault();  
  35.     //cuplayer.com提示:阻止默认行为  
  36.     e.stopPropagation();  
  37.     //获取当前被拖放元素的存放数据参数  
  38.     var text = e.dataTransfer.getData('text');  
  39.     //建立元素  
  40.     var node=document.createElement("li");  
  41.     var textnode=document.createTextNode(text);  
  42.     node.appendChild(textnode);  
  43.     this.appendChild(node);  
  44.     //删除被拖放元素  
  45.     document.querySelector('#drags').removeChild(elementDragged);      
  46.     return false;  
  47. });  
  48. </script> 

[html5]html5拖放动作的源代码范例(拖动事件)来源http://www.helloweba.com/view-blog-270.html

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器