HTML Drag and Drop API 的使用和实现页面元素拖拽效果

theme: nico

本文正在参加「金石计划 . 瓜分6万现金大奖」

介绍

HTML5 提供了专门的拖拽与拖放的 API，目前各浏览器都已支持，包括 IE。HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。

事件类型

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

接口

给应用程序添加 HTML 拖放功能，主要使用 DragEvent 和 DataTransfer 这两个接口。

DragEvent

这个接口继承自 MouseEvent，有一个构造函数和一个 dataTransfer 属性，dataTransfer 属性是一个 DataTransfer 对象。

DataTransfer

保存着拖拽操作中的数据，例如拖拽事件的类型（如拷贝 copy 或者移动 move），拖拽的数据（一个或者多个项）和每个拖拽项的类型（MIME 类型）。

items 属性

包含包含所有拖动数据 DataTransferItem 对象的 DataTransferItemList。这个列表对象包含：向列表中添加拖拽项，从列表中移除拖拽项和清空列表中所有的拖拽项的方法。

files 属性

包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表。

DataTransferItem

一个 DataTransferItem 代表一个拖拽项目，每个项目都有一个 kind 属性（值为 string 或 file）和一个表示数据项目 MIME 类型的 type 属性。DataTransferItem 对象也有获取拖拽项目数据的方法：DataTransferItem.getAsFile() 和 DataTransferItem.getAsString()。

DataTransfer 对象使用同步的 getData() 方法去得到拖拽项的数据，而 DataTransferItem 对象使用异步的 getAsString() 方法得到拖拽项的数据。

HTML draggable 属性

• 拖拽选中文本、拖拽图像和拖拽链接会使用默认拖拽行为。
• 当一个图像或链接被拖拽时，图像或链接的 URL 被设定为拖拽数据。
• 对于其他元素，只有当它们是被选中的一部分时，才会触发默认拖拽行为。

除了图像、链接和选择的文本默认的可拖拽行为之外，其他元素在默认情况下是不可拖拽的。如果要使其他的 HTML 元素可拖拽：

1. 将想要拖拽的元素的 draggable 属性设置成 draggable=”true”。
2. 为 dragstart 事件添加监听。
3. 在定义的监听中设置拖拽数据。

<p draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
  This text <strong>may</strong> be dragged.
</p>

拖拽删除元素

下面示例，拖拽右侧的列表项目到左侧时，可以删除该列表项目。

代码片段

拖拽预览图片

下面示例，从本地拖拽文件到页面中时，可以预览该图片。

代码片段

拖拽效果

HTML Drag and Drop API 方便了我们对拖拽的数据的处理，如果需要实现 HTML 元素的拖拽移动，更加方便地是使用 mouse 事件。

代码片段

参考资料

• JavaScript实现最简单的拖拽效果