重点知识
拖放事件
拖动某元素时，会在被拖动元素上以此触发下列事件：
dragstart:当拖拽元素开始被拖拽的时候触发的事件
drag:当拖拽元素的过程中一直触发的事件
dragend：当拖拽完成后触发的事件
当某个元素被拖放到一个有效的放置目标上时，放置目标上回依次触发下列事件：
dragenter:当拖曳元素进入目标元素的时候触发的事件
dragover:拖拽元素在目标元素上移动的时候触发的事件
dragleave:当拖曳元素离开目标元素的时候触发的事件
drop:被拖拽的元素在目标元素上同时鼠标放开触发的事件
自定义放置目标：
在拖放元素经过某些无效放置目标时，可以看到一种特殊的光标(圆环中有一条反斜线)，表示不能放置。虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素，无论用户如何操作，都不会触发drop事件。不过，你可以把任何元素变成有效的放置目标，方法是：重写dragenter和dragover事件的默认行为。
例如，假如一个ID为“droptarget”的div元素，可以用如下代码将它变成一个放置目标
var droptarget = document.getElementById(‘droptarget‘)
droptarget.addEventListener(‘dragover‘, function(event){
event.preventDefault()
}
droptarget.addEventListener(‘dragenter‘, function(event){
event.preventDefault()
}dataTransfer对象
dataTransfer对象，它是事件对象的一个属性，用于从被拖放元素向放置目标传递字符串格式的数据。
detaTransfer对象有两个主要方法：getData()和setData()。setData()方法的第一个参数，也是getData()方法的唯一的一个参数，是一个字符串，表示保存的数据类型，取值为“text”和“URL”
event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text");注意：保存在dataTransfer对象中的数据只能在drop事件处理程序中读取。
可拖动
默认情况下，只有图像、链接、文本是可以拖动的。让其他元素可以拖放也是可能的。html5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动。图像和链接的draggable属性自动设置成了true，而其他元素这个属性的默认值都是false。通过设置这个属性可以使其他元素可拖动
<div draggable="true">...</div>相关实例
<div class="dustbin">
<br/>垃<br/>圾<br/>桶
</div>
<div class="dragbox">
<div class="drag-item" draggable="true">item 1</div>
<div class="drag-item" draggable="true">item 2</div>
<div class="drag-item" draggable="true">item 3</div>
<div class="drag-item" draggable="true">item 4</div>
<div class="drag-item" draggable="true">item 5</div>
</div>
<div class="dragremind"></div>var dustbin = document.querySelector(‘.dustbin‘);
var draglist = document.getElementsByClassName(‘drag-item‘);
var remind = document.querySelector(‘.dragremind‘);
var dragElem = null;
for(var i=0;i<draglist.length;i++){
draglist[i].addEventListener("drag", function(event){
event.dataTransfer.effectAllowed = "move";
dragElem = event.target;
});
}
dustbin.addEventListener("dragover", function(event){
event.preventDefault();
});
dustbin.addEventListener("dragenter", function(event){
event.preventDefault();
this.style.color = "#fff";
});
dustbin.addEventListener("dragleave", function(event){
this.style.color = "#000";
});
dustbin.addEventListener("drop", function(event){
if(dragElem){
remind.innerText = dragElem.innerText;
dragElem.parentElement.removeChild(dragElem);
this.style.color = "#000";
}
});
参考资料
《javascript高级程序设计》