HTML5：新增属性draggable

draggable 拖拽

可拖拽：draggable='true';

（解释：复制了一个虚影）

拖拽的7个事件

绑定在目标元素上（3个事件）

1.dragstart

拖拽开始

2.drag

拖拽移动事件

3.dragend

结束拖拽

绑定在目标区域上（4个事件）

1.dragenter

进入目标区域时触发（一瞬间的触发）；

2.dragover

在目标区域中时触发（始终触发状态）；

3.dragleave

（不松开鼠标的情况下）离开目标区域时触发（可重复触发）；

4.drop

在目标区域中松开鼠标时触发，并放下被拖拽的元素；

Attention：

鼠标松开的一瞬间，事件dragleave和事件drop不可共存，二者同时存在时，始终只能触发一个事件，而浏览器默认触发dragleave

若想触发drop事件，则需要在dragover事件中阻止dragleave事件的默认行为。

阻止方法：e.preventDefault();

解释：四个事件是一个连续触发的状态，上一个事件的结束往往是下一个事件的触发开始，所以在dragover中阻止事件的默认行为，即阻止的是dragleave的默认触发行为，从而实现drop事件的触发。