js 拖放

一。说明：通过 draggable 属性设置元素是否可拖动。true 则可拖动，反之不行。

二。拖放API

（1）拖动元素时触发的API：

• dragstart()：开始拖动的时候触发。
• drag()：拖动期间触发，dragstart 触发后就开始触发。
• dragend()：拖动停止时触发。

（2）放置到目标元素时，触发的API：

• dragenter()：元素被拖动到放置目标上，就触发。
• dragover()：在放置目标上移动时触发。dragenter 触发完就触发。
• dragleave()：元素先被拖动到放置目标上后又拖出时触发。
• drop()：拖动停止在放置目标时触发。触发改方法时需要阻止默认行为。event.preventDefault();

三。dataTransfer对象：主要拥有 getData() 和 setData() 这两个方法。

• getData(name)：用于获取setData 设置的值。
• setData(name, data)：保存值到 dataTransfer 对象中。
• dropEffect：该属性可以知道被拖动的元素能够执行哪种放置行为。改属性只有搭配 effectAllowed 属性才有用。

• effectAllowed：属性表示允许拖动元素的哪种 dropEffect。

• setDragImage(element, x, y)：指定一幅图像，当拖动发生时，显示在光标下方。这个方法接收的三个参数分别是要显示的 HTML 元素和光标在图像中的 x、y 坐标。

四。疑难杂症。

对于一些疑难杂症可以在触发事件时去阻止默认事情和阻止冒泡去解决。欢迎留言。