Overview

拖放的流程：选中 —> 拖动 —> 释放

选中

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

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

auto: 跟随浏览器定义是否可以拖动

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

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

针对对象	事件名称	说明
被拖动的元素	dragstart	在元素开始被拖动时候触发
	drag	在元素被拖动时反复触发(持续)[todo check下浏览器更新频率大概16ms每帧]
	dragend	在拖动操作完成时触发
目的地对象	dragenter	当被拖动元素进入目的地元素区域边界触发
	dragover	当被拖动元素在目的地元素内时触发(持续 every few hundred milliseconds)
	dragleave	当被拖动元素没有放下就离开目的地元素区域边界触发

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault()

针对对象	事件名称	说明
目的地对象	drop	被拖动元素在目的地元素里放下时触发，需要`e.preventDefault()`取消浏览器默认行为。

用于保存拖动并放下（drag and drop）过程中的数据。它可以保存一项或多项数据，这些数据项可以是一种或者多种数据类型。

是一个web api，它派生于MouseEvent，具有Event与MouseEvent对象的所有功能，并增加了dataTransfer属性。该属性是 DataTransferItemList.

属性	说明
types	只读属性。它返回一个我们在dragstart事件中设置的拖动数据格式的数组。格式顺序与拖动操作中包含的数据顺序相同。
files	返回拖动操作中的文件列表。包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件，此属性是一个空列表。例子
items	提供一个包含所有拖动数据列表的 `DataTransferItemList` 对象。每个item是DataTransferItem对象
dropEffect	获取当前选定的拖放操作的类型或将操作设置为新类型。它应该始终设置成effectAllowed的可能值之一[`none`, `copy`, `link` 或 `move`]。dragover事件处理程序中针对放置目标来设置dropEffect。
effectAllowed	指定拖放操作所允许的效果。必须是其中之一【 `none`, `copy`, `copyLink`, `copyMove`, `link`, `linkMove`, `move`, `all` or `uninitialized` 】默认为`uninitialized` 表示允许所有的效果。ondragstart处理程序中设置effectAllowed属性

方法	说明
void setData(format, data)	将拖动操作的拖动数据设置为指定的类型和数据。format是DataTransfer.items中的type值，data就是要设置成的数据值，例子
String getData(format)	返回指定格式的数据，format与setData()中一致
void clearData(format)	只能用在`dragstart`事件中，会清除所有的数据。也就是执行了此方法后，DataTransfer.getData()方法只能获得空字符串。删除给定format的拖动操作的数据。如果给定类型的format不存在，此方法不执行任何操作。如果不给定参数，则删除所有format的数据。
[void setDragImage(img	element, offsetX, offsetY)](https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransfer/setDragImage)

属性	说明
kind	只读属性，它返回一个 `DataTransferItem` 用来表示拖拽项(drag data item)的类型: 一些文本`string`或者一些文件`file`
type	只读属性。返回一个代表拖动数据项类型的 `DOMString`。 `type` 是一个Unicode字符串，通常由MIME给出，不过不需要MIME类型。

方法	说明
getAsFile(): File \|\| null	如果`DataTransferItem`是一个文件, 那 `DataTransferItem.getAsFile()` 方法将返回拖拽项数据的 `File` 对象. 如果拖拽项的数据不是一个文件，则返回 `null`.
getAsString(`DOMString`=>undefined)	当`DataTransferItem`对象的kind属性是一个普通Unicode字符串时，该方法会用 DataTransferItem对象的kind属性作为入参来执行传入的回调函数 (i.e. `kind` is `string`).