drag&drop

用于各种拖动操作中。

使用前介绍一下两个基本概念：

1. 在一个元素上添加属性draggable="true",该元素就成为一个被拖拽元素
2. 将被拖拽元素拖入目标元素

拖拽事件（加粗元素才拥有该事件）

1. dragstart：被拖拽元素开始被拖拽时触发。
2. dragend：被拖拽元素拖拽完成时触发。
3. dragenter：被拖拽元素进入目标元素时触发。（实际上是鼠标进入目标元素才会触发，即使拖拽元素部分进入，但鼠标没有进入也不会触发此事件）
4. dragover：被拖拽元素在目标元素上移动时触发。（即使被拖拽元素没有移动，只要在目标元素上就会触发）。
5. drop：被拖拽元素在目标元素上鼠标放开时触发。（要取消dragover的默认事件才会触发此事件preventDefault();）

DragEvent事件对象

因为drop事件在目标元素上，当被拖拽元素有多个时，并不能区分出是哪个被拖拽元素触发了目标元素的事件。但我们可以采用传值的方式。

1. 在被拖拽元素添加事件：

xxx.addEventListener("dargstart",function(e){
	e.dataTransfer.setData("data",this.id);  //此处将被拖拽元素的id值存入对象中
});

2. 在目标元素添加事件：

xxx.addEventListener("drop",function(e){
	var data = e.dataTransfer.getData("data");  //此处就将被拖拽元素的id值取了出来，即知道了是哪个被拖拽元素触发了目标元素的事件
});