认识
一、认识
**HTML 拖放（Drag and Drop）**接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。
二、事件
一个典型的拖拽操作是这样的：用户选中一个**可拖拽的（draggable）元素，并将其拖拽（鼠标不放开）到一个可放置的(droppable)**元素，然后释放鼠标。在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发（比如drag 和 dragover 事件类型）。
三、接口
HTML的拖拽接口有 DragEvent, DataTransfer, DataTransferItem 和 DataTransferItemList。
3.1 DragEvent
DragEvent 接口有一个构造函数和一个 dataTransfer 属性，dataTransfer 属性是一个 DataTransfer 对象。
3.2 DataTransfer
DataTransfer 对象包含了拖拽事件的状态，例如拖拽事件的类型（如拷贝 copy 或者移动 move），拖拽的数据（一个或者多个项）和每个拖拽项的类型（MIME 类型）。 DataTransfer 对象也有向拖拽数据中添加或删除项目的方法。
DataTransfer 和 DataTransferItem 接口的一个主要的不同是前者使用同步的 getData() 方法去得到拖拽项的数据，而后者使用异步的 getAsString() 方法得到拖拽项的数据。
3.3 DataTransferItem
每个 DataTransfer 都包含一个 items 属性，这个属性是 DataTransferItem 对象的 list。一个 DataTransferItem 代表一个拖拽项目，每个项目都有一个 kind 属性（string 或 file）和一个表示数据项目 MIME 类型的 type 属性。DataTransferItem 对象也有获取拖拽项目数据的方法。
DataTransfer 和 DataTransferItem 接口的一个主要的不同是前者使用同步的 getData() 方法去得到拖拽项的数据，而后者使用异步的 getAsString() 方法得到拖拽项的数据。
3.4 DataTransferItemList
DataTransferItemList 对象是 DataTransferItem 对象的列表。这个列表对象包含以下方法：向列表中添加拖拽项，从列表中移除拖拽项和清空列表中所有的拖拽项。