拖拽操作

Posted 2020-10-04 念念念不忘

一、基本信息

描述：被拖拽的元素依然在原地，拖拽的相当于拖拽元素的影子

方法：

1、在标签里写draggable="true"

<li draggable="true"></li>

2、被拖拽的元素

（1）拖拽前触发

写法：元素.ondragstart = function(){ }

描述：点击被拖拽元素且开始拖拽的一瞬间触发的事件

（2）拖拽结束触发

写法：元素.ondragend= function(){ }

描述：当拖拽后鼠标抬起的时候表示拖拽结束，触发事件

（3）拖拽开始与结束之间连续触发

写法：元素.ondrag= function(){ }

描述：即时拖拽的时候停在原地不动也会一直触发

3、目标元素

（1）拖拽到目标点的时候触发

写法：元素.ondragenter= function(){ }

描述：当被拖拽的元素进入目标位置的时候触发

（2）离开目标点的时候触发

写法：元素.ondragleave= function(){ }

描述：当被拖拽的元素离开目标位置的时候触发

（3）拖拽到目标点到离开之间触发

写法：元素.ondragover= function(){ }

描述：移动到目标点后就会一直触发，即使停在目标点内不动，移出目标点的时候停止触发