Drag Api

Drag Api用于在html上实现元素的拖拽

拖拽对象分为拖拽目标和释放目标

• 拖拽目标：鼠标按下元素，想要拖拽该元素，即被拖拽的元素
• 释放目标：鼠标拖动拖拽目标，在目标位置松开，即释放目标

1.设置元素可拖动

给元素添加draggable="true"属性

<div draggable="true"></div>

2.拖动事件

在拖动目标上触发事件(源元素)

• 此时e.target是拖动目标元素

事件	描述
ondragstart	拖动目标开始拖动时触发
ondrag	拖动目标被拖动时触发
ondragend	拖动目标结束拖动时触发

在释放目标上触发的事件

• 此时e.target是释放目标元素

事件	描述
ondragenter	拖拽目标进入释放目标时触发
ondragover	拖拽目标在释放目标上移动时触发
ondragleave	拖拽目标离开释放目标时触发
ondrop	拖拽目在释放目标上松开鼠标时触发