原文链接：https://juejin.im/post/5afd462751882542b000bb06

Drag & Drop

Drag & Drop是HTML5中的拖放，即抓取对象后拖放到指定的位置。

设置元素为可拖放draggable

事件

dragstart dragend dragenter dragover drop

var oDrag = document.getElementsByClassName('drag')[0],     oWrapper = document.getElementsByClassName('wrapper')[0]; //当【元素】被抓取时 oDrag.addEventListener('dragstart',function(){     console.log('dragstart'); }) //当【元素】被放开时 oDrag.addEventListener('dragend',function(){     console.log('dragend'); }) //当鼠标进入【放置框】内（由鼠标位置决定） oWrapper.addEventListener('dragenter',function(){     console.log('dragenter');      }) //当元素在【放置框】上方移动时 oWrapper.addEventListener('dragover',function(e){     //触发 drop 事件必须先在 dragover 里面取消默认事件     e.preventDefault();     console.log('dragover'); }) //当元素被拖入【放置框】内时 oWrapper.addEventListener('drop',function(e){     //避免将文件拖入时，文件做为链接打开了     e.preventDefault();     console.log('drop'); }) //dragstart //dragenter //dragover //drop //dragend

设置数据 e.dataTransfer.setData()

1.实战---将【1】和【2】放到【放置框】内

1
 
2
 
放置框

2.实战---拖住排序加拖拽删除

     
         
1
         
2
         
3
         
4
         
5
     
     
垃圾桶
 

var oUl = document.getElementsByTagName('ul')[0],     oBox = document.getElementsByClassName('box')[0],     oLi = document.getElementsByTagName('li'),     len = oLi.length;      function bindLiEvent(){     for(var i = 0; i 

作者：柒号
链接：https://juejin.im/post/5afd462751882542b000bb06
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。