html 拖动事件(drag event )分析

如何使元素支持拖动

图片和链接默认就支持拖拽.
其他html元素添加 draggable="true" 属性可支持拖拽.
在页面拖拽该元素时, 会触发一系列事件

事件详解

dragstart

在draggable元素上按下鼠标, 开始移动时, 触发一次. (在firefox上需拖动几个像素后才触发此事件).
event.traget 是draggable元素本身.

图片.png

drag

拖动draggable元素过程中时, 移动一像素就触发一次.
event.traget 是draggable元素本身.

图片.png

dragend

释放draggable元素时触发一次.
event.traget 是draggable元素本身；

图片.png

drop

释放draggable元素时触发一次, event.traget 是鼠标释放时指向的任何元素, 除了body.

[坑1] 必须添加了dragover 事件, 才会触发 drop 事件. (还是搞不太明白这个逻辑.)

图片.png
图片.png

dragenter 拖动时进入某元素范围 / dragleave 拖动时离开某元素范围

分别触发一次, event.traget 是鼠标下方指向的元素.

dragover 拖动时在某元素上移动鼠标

移动一像素就触发一次,