被拖拽元素有关的事件
dragstart: 当拖拽元素被拖动离开原位置触发。
dragend: 档松开鼠标，停止拖拽时触发。
目标元素有关事件
dragenter: 拖拽元素进入目标元素区域触发。
dragover：拖拽元素在目标元素上移动触发。
drop：拖拽元素在目标元素上松开鼠标停止拖拽时触发。
P.S.想要触发drop事件，必须要取消dropover的默认事件（event.preventDefault()）
我们dataTransfer来保存被拖拽元素的一些信息。
event.target.dataTransfer.setData(key, value); 通过setData()方法来保存被拖拽元素中我们需要的信息 。
event.target.dataTransfer.getData(key, value); 通过getData()方法来读取被拖拽元素中我们保存的信息。
基本我们是在dragstart事件处理函数中处理保存event.target的一些信息，然后在其他事件触发时，获取所需信息来完成我们需要实现的功能。
一个小DEMO（实现信息列表的拖动位置互换和垃圾箱回收）
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(); HTML5拖拽
原文地址：http://www.cnblogs.com/Walker-lyl/p/7454204.html