HTML5——元素拖放

一、拖放事件

1、概念

        在 html5 中增加了多个针对元素拖放的事件，使实现元素拖放变得简单。拖放事件仅仅能实现拖放的动作，要想真正施放后进行数据交互，还需要结合dataTransfer对象，才能实现真正实现拖放效果。

        注意：要实现元素拖放，首先要在目标元素上设置draggable = "true",否则无法实现拖放。

2、事件

① dragStart：在元素拖动开始时触发，事件对象是被拖动元素。

② drag：在元素拖动过程中触发，事件对象是被拖动元素。

③ dragEnter：当被拖动元素进入目标元素时触发，事件对象是目标元素。

④ dragOver：当被拖动元素在目标元素内移动时触发，事件对象是目标元素。

⑤ dragLeave：当被拖动元素离开目标元素时触发，事件对象目标元素。

⑥ drop：当被拖动元素放置在目标元素上是触发，事件对象是目标元素。

⑦ dragEnd：当拖放事件完成后，即 drop 事件之后触发，事件对象是被拖动元素。

3、事件执行顺序

正常情况下，在页面中执行一次拖放操作，一般会按顺序执行以下五个事件：dragStart、dragEnter、dragOver、drop、dragEnd 。如果反复拖动元素离开和进入目标元素，则 dragEnter 和 dragLeave 事件会被执行多次。

二、dataTransfer 对象

1、概念

​ dataTransfer 对象是事件对象的一个属性，用来暂时存放被拖放的数据，只能在拖放事件的