拖拽专题

[coconilu]

相关事件

1. drag，当元素或者选择的文本被拖动时触发 drag 事件 (每几百毫秒)。
2. dragstart，当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发（仅一次）。
3. dragend，拖放事件在拖放操作结束时触发(通过释放鼠标按钮或单击escape键)（仅一次）。
4. dragexit，当一个元素不再是拖动操作的直接选择目标时，将会触发dragexit 事件。
5. dragover，当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件(每几百毫秒触发一次)。
6. dragenter，当一个被拖动的元素或者被选择的文本进入一个有效的拖放目标时，将会触发dragenter 事件。
7. dragleave，当一个被拖动的元素或者被选择的文本离开一个有效的拖放目标时，将会触发dragleave 事件。
8. drop，当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时，drop 事件被抛出。

简单的拖动DOM元素

思路如下：

为了方便，可以让document对象代理这些事件，然后从event.target获取目标对象。

被拖拽的元素需要设置：draggable="true"

具体可以参考：

MDN上的例子，或者CodePen上的例子

DataTransfer

如果在拖拽过程，我们需要传输一些数据的话可以借助DataTransfer

访问途径：event.dataTransfer

API：

dropEffect，获取 / 设置实际的放置效果，它应该始终设置成 effectAllowed  的可能值之一 。
effectAllowed，用来指定拖动时被允许的效果。
files，包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件，此属性是一个空列表。此属性访问指定的FileList 中无效的索引将返回未定义（undefined）。
types，保存一个被存储数据的类型列表作为第一项，顺序与被添加数据的顺序一致。如果没有添加数据将返回一个空列表。

getData(type)，根据指定的类型检索数据，如果指定类型的数据不存在或者该 DataTransfer 对象中没有数据，方法将返回一个空字符串。
setData(type,data)，为一个给定的类型设置数据。
clearData([type])，删除与给定类型关联的数据。
setDragImage(imgElement,offsetX,offsetY)，自定义一个期望的拖动时的图片。大多数情况下，这项不用设置，因为被拖动的节点被创建成默认图片。

拖拽上传文件

当我们把本地文件拖动到浏览器上的时候，可以通过API获取这些文件的指针：event.dataTransfer.files。

files是FileList接口的实例，是一个File对象数组。

File接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。

FileReader允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

我们可以通过上述API去解析拖入的文件。可以参考CodePen的一个示例。