如何使元素支持拖动
图片和链接默认就支持拖拽.
其他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 拖动时在某元素上移动鼠标
移动一像素就触发一次,
网友评论