2022-01-31 原生js中拖放事件dragable的介绍和使用

0.概念

拖放事件

拖放源涉及到3个拖放事件。拖动拖放源时，依次触发dragstart、drag和dragend这3个事件

dragstart

按下鼠标键并开始移动鼠标时，会在被拖放的元素上触发dragstart事件。此时光标变成“不能放”符号(圆环中有一条反斜线)，表示不能把元素放到自己上面

drag

触发dragstart事件后，随即会触发drag事件，而且在元素被拖动期间会持续触发该事件

dragend

当拖动停止时(无论是把元素放到了有效的放置目标，还是放到了无效的放置目标上)，会触发dragend事件

1.定义

draggable：设置为true，元素就可以拖拽了
拖拽元素事件：事件对象为被拖拽元素

——dragstart,拖拽前触发
——drag,拖拽前、拖拽结束之间，连续触发
——dragend,拖拽结束触发

示例

<div class