拖拽事件

每一个可拖动的元素，在拖动过程中，都会经历三个过程：拖动开始 ==> 拖动过程中 ==> 拖动结束。

针对对象	事件名称	说明	MDN 文档
被拖动的元素	dragstart	在元素开始拖动时触发	文档
	drag	在元素拖动时反复触发	文档
	dragend	在拖动操作完成时触发	文档
目的地对象	dragenter	当被拖动元素进入目的地元素所占据的屏幕空间时触发	文档
	dragover	当被拖动元素在目的地元素内时触发（每 100ms 触发一次）	文档
	dragleave	当被拖动元素没有放下就离开目的地元素时触发	文档
	drop		文档

实践应用

拖放的流程：用户通过鼠标选中一个可拖动的（draggable）元素，移动鼠标到一个可放置的（droppable）元素，然后释放鼠标。

选中 ===> 拖放 ===> 释放

在 HTML5 标准中，为了使元素可拖动，需要将元素的 draggable 属性设置为 true。

文本、图片和链接时默认可以拖放的，它们的 draggable 属性自动被设置为 true。

图片和链接按住鼠标左键选中即可拖放。

文本只有在被选中的情况下才能拖放。如果显示设置文本的 draggable 属性为 true，按住鼠标左键也可以直接拖放。

draggable 属性：设置元素是否可拖动。

<element draggable="true | false | auto"></element>

每一个可拖动的元素，在拖动过程中，都会经历三个过程：拖动开始 ==> 拖动过程中 ==> 拖动结束。

针对对象	事件名称	说明	MDN 文档
被拖动的元素	dragstart	在元素开始拖动时触发	文档
	drag	在元素拖动时反复触发	文档
	dragend	在拖动操作完成时触发	文档
目的地对象	dragenter	当被拖动元素进入目的地元素所占据的屏幕空间时触发	文档
	dragover	但被拖动元素在目的地元素内时触发（每 100ms 触发一次）	文档
	dragleave	当被拖动元素没有放下就离开目的地元素时触发	文档

⚠️ dragenter 和 dragover 事件的默认行为时拒绝接收任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。

⚠️ 注意当从操作系统向浏览器中拖动文件时，不会触发 dragstart 和 dragend 事件。

到达目的地之后，释放元素事件。

针对对象	事件名称	说明	MDN 文档
目的地对象	drop	当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为	文档

与拖放操作所触发的事件同时派发的对象是 DragEvent，它派生于 MouseEvent，具有 Event 与 MouseEvent 对象的所有功能，并增加了 dataTransfer 属性。该属性用于保存拖放的数据和交互信息，返回 DataTransfer 对象。

DataTransfer 对象定义的属性和方法有很多种，我们看下列入标准的几个。

属性	说明
types	只读属性。它返回一个我们在 `dragstart` 事件中设置的拖动数据格式的数组。格式顺序与拖动操作中包含的数据顺序相同。IE10+、Edge、Safari3.1、Firefox3.5+ 和 Chrome4 以上支持该属性。
files	返回拖动操作中的文件列表。包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件，此属性是一个空列表。
dropEffect	获取当前选定的拖放操作的类型或将操作设置为新类型。可选值包括 `none`、`move`、`copy`、`link`。`dragover` 事件处理程序中针对放置目标来设置 dropEffect。
effectAllowed	指定拖放操作所允许的效果。可选值为 `none`、`copy`、`copyLink`、`copyMove`、`link`、`linkMove`、`move`、`all`、`uninitialized` 默认为 `uninitialized` 表示允许所有的效果。`ondragstart` 处理程序中设置 `effectAllowed` 属性。

方法	说明
`void setData(format, data)`	将拖动操作的拖动数据设置为指定的数据和类型。`format` 可以是 MIME 类型。
`String getData(format)`	返回指定格式的数据，`format` 与 `setData()` 中一致。
`void clearData([format])`	删除给定类型的拖动操作的数据。如果给定类型的数据不存在，此方法不执行任何操作。如果不给定参数，则删除所有类型的数据。
`void setDragImage(img, xOffset, yOffset)`	指定一副图像，当拖动发生时，显示在光标下方。大多数情况下不用设置，因为被拖动的节点被创建成默认图片。`x`、`y` 参数分别指示图像的水平、垂直偏移量