Drag and Drop （拖放）？简单来说，HTML5 提供了 Drag and Drop API，允许用户用鼠标选中一个可拖动元素，移动鼠标拖放到一个可放置到元素的过程。
我相信每个人都或多或少接触过拖放，比如浏览器多标签页之间的可拖放排序、手机中的 App 可以随便拖放排序等等，Drag and Drop 已经给我们提供了更便捷、更灵活的网络应用体验。
DnD 规范定义了基于事件的拖放机制和附加标记，以标记网页上几乎所有 draggable 的元素类型，一个典型的 drag 操作是这样开始的：用户用鼠标选中一个可拖动的（draggable）元素，移动鼠标到一个可放置的（droppable）元素，然后释放鼠标。 在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发（比如 drag 和 dragover 事件类型）。
总结起来很简单：
Drag Source(What to drag) => Drop Target(Where to drop)
所有的拖拽事件都对应一个 global event handler，Dnd API 一个有 8 个事件，可以分为绑定在 Drag Source 上 3 个、绑定在 Drag Target 上 5 个
| 事件 | 描述 |
|---|---|
| dragstart | 当用户开始拖动一个元素或选中的文本时触发。 |
| drag | 当拖动元素或选中的文本时触发。 |
| dragend | 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键)。 |
| 事件 | 描述 |
|---|---|
| dragenter | 当拖动元素或选中的文本到一个可释放目标时触发。 |
| dragover | 当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。 |
| dragexit | 当元素变得不再是拖动操作的选中目标时触发。 |
| dragleave | 当拖动元素或选中的文本离开一个可释放目标时触发。 |
| drop | 当元素或选中的文本在可释放目标上被释放时触发。 |
drag 和 dragover）。使用时注意防抖或节流dragover 事件中使用 event.preventDefault() 阻止默认事件行为时，才能正确触发 drop 事件event.preventDefault() 阻止默认事件行为，以防止打开一个新的标签HTML 拖拽的数据接口有三个 DataTransfer、DataTransferItem 和 DataTransferItemList。
在进行拖放操作时，DataTransfer 对象用来保存，通过拖放动作，拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型。
| 属性 | 类型 | 描述 |
|---|---|---|
| dropEffect | String | 获取 / 设置实际的放置效果，它应该始终设置成 effectAllowed 的可能值之一，copy、move、link、none |
| effectAllowed | String | 用来指定拖动时被允许的效果。 |
| Files | FileList | 保存一个被存储数据的类型列表作为第一项，顺序与被添加数据的顺序一致。如果没有添加数据将返回一个空列表。 |
| types | DOMStringList | 包含一个在数据传输上所有可用的本地文件列表。如果拖动操作不涉及拖动文件，此属性是一个空列表。 |
void clearData([in String type])String getData(in String type)void setData(in String type, in String data)void setDragImage(in nsIDOMElement image, in long x, in long y)
MIME (Multipurpose Internet Mail Exchange)来指定数据传输类型，例如：text/plain想象一下我们想开发一个使用 HTML5 DnD API 来实现的丰富可交互式的应用。结果因为浏览器不支持，是不是很糟糕。对我们是否需要使用降级方案还是有很重要的参考意义的。
下面有两种常用的方法来帮助我们来检测。
Modernizr 是一个出色的可用于检测用户浏览器是否支持 HTML5 和 CSS3 功能的库。
if (Modernizr.draganddrop) { // Browser supports HTML5 DnD.} else { // Fallback to a library solution.}实现拖拽元素只需要在 dom 标签上加入 draggable="true"
<div id="drag-source" draggable="true"></div>user-select
可拖拽元素，建议使用 user-select，避免用户在拖拽时选取到内部元素。
[draggable='true'] { /* To prevent user selecting inside the drag source */ user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}cursor
可拖拽元素，建议使用 cursor，设定可拖拽元素的鼠标游标，提升交互。
[draggable='true'] { cursor: move;}Vue 中使用 dnd 可以直接绑定 event 到组件上。
下面栗子包含的内容：
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。