标签：事件触发 var start 位置 nsf code lis div 20px
dragstart: 当拖拽元素被拖动离开原位置触发。
dragend: 档松开鼠标，停止拖拽时触发。
dragenter: 拖拽元素进入目标元素区域触发。
dragover：拖拽元素在目标元素上移动触发。
drop：拖拽元素在目标元素上松开鼠标停止拖拽时触发。
P.S.想要触发drop事件，必须要取消dropover的默认事件（event.preventDefault()）
event.target.dataTransfer.setData(key, value); 通过setData()方法来保存被拖拽元素中我们需要的信息 。
event.target.dataTransfer.getData(key, value); 通过getData()方法来读取被拖拽元素中我们保存的信息。
基本我们是在dragstart事件处理函数中处理保存event.target的一些信息，然后在其他事件触发时，获取所需信息来完成我们需要实现的功能。
li { width: 200px; height: 40px; background-color: #ccc; margin: 20px; list-style: none; display: block; } #trash-box { width: 300px; height: 200px; background-color: #000; color: #fff; }
<ul>
<li class="drag-item" draggable="true">列表项1</li>
<li class="drag-item" draggable="true">列表项2</li>
<li class="drag-item" draggable="true">列表项3</li>
<li class="drag-item" draggable="true">列表项4</li>
<li class="drag-item" draggable="true">列表项5</li>
</ul>
<div id="trash-box">删除列表</div>
var li = document.getElementsByTagName(‘li‘), trashBox = document.getElementById(‘trash-box‘), len = li.length, ul = document.getElementsByTagName(‘ul‘)[0]; function bindLiEvent () { // 给每个li绑定拖拽相关事件 for(var i = 0; i < len; i++) { li[i].addEventListener(‘dragstart‘, function(e) { var i = getIndex(li, this); e.dataTransfer.setData("data",i); }, false); li[i].addEventListener(‘drop‘, function(e) { var i = e.dataTransfer.getData("data"); console.log(i); ul.insertBefore(li[i], this); }, false); li[i].addEventListener(‘dragover‘, function(e) { e.preventDefault(); }, false); } } // 获取li的索引 function getIndex(list, c) { for(var i = 0, len = list.length; i < len; i++) { if(list[i] === c) { return i; } } } // 垃圾箱相关事件绑定 function bindTrashEvent() { trashBox.addEventListener(‘drop‘, function(e) { var index = e.dataTransfer.getData("data"); li[index].remove(); },false); trashBox.addEventListener(‘dragover‘, function(e) { e.preventDefault(); },false); } bindLiEvent(); bindTrashEvent();
标签：事件触发 var start 位置 nsf code lis div 20px
原文地址：http://www.cnblogs.com/Walker-lyl/p/7454204.html
