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事件的触发。