使用 Drag and Drop 给Web应用提高交互体验

什么是 Drag and Drop （拖放）？

简单来讲，HTML5 提供了 Drag and Drop API，容许用户用鼠标选中一个可拖动元素，移动鼠标拖放到一个可放置到元素的过程。

我相信每一个人都或多或少接触过拖放，好比浏览器多标签页之间的可拖放排序、手机中的App能够随便拖放排序等等，Drag and Drop 已经给咱们提供了更便捷、更灵活的网络应用体验。

HTML5 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个

Drag Source

Event	Description
dragstart	当用户开始拖动一个元素或选中的文本时触发。
drag	当拖动元素或选中的文本时触发。
dragend	当拖拽操做结束时触发 (好比松开鼠标按键或敲“Esc”键)。

Drop Target

Event	Description
dragenter	当拖动元素或选中的文本到一个可释放目标时触发。
dragover	当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）。
dragexit	当元素变得再也不是拖动操做的选中目标时触发。
dragleave	当拖动元素或选中的文本离开一个可释放目标时触发。
drop	当元素或选中的文本在可释放目标上被释放时触发。

注意点

• 在鼠标操做拖放期间，有一些事件可能触发屡次，（好比：drag 和 dragover）。使用时注意防抖或节流
• 在 dragover 事件中使用 event.preventDefault() 阻止默认事件行为时，才能正确触发 drop 事件
• 在 Firefox 浏览器中触发 drop 时要使用 event.preventDefault() 阻止默认事件行为，以防止打开一个新的标签

数据接口

HTML拖拽的数据接口有三个 DataTransfer、DataTransferItem 和 DataTransferItemList。

在进行拖放操做时，DataTransfer 对象用来保存，经过拖放动做，拖动到浏览器的数据。它能够保存一项或多项数据、一种或者多种数据类型。

DataTransfer 经常使用属性

属性	类型	描述
dropEffect	String	获取 / 设置实际的放置效果，它应该始终设置成 effectAllowed 的可能值之一，copy、move、link、none
effectAllowed	String	用来指定拖动时被容许的效果。
Files	FileList	保存一个被存储数据的类型列表做为第一项，顺序与被添加数据的顺序一致。若是没有添加数据将返回一个空列表。
types	DOMStringList	包含一个在数据传输上全部可用的本地文件列表。若是拖动操做不涉及拖动文件，此属性是一个空列表。

DataTransfer 经常使用方法

• 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来实现的丰富可交互式的应用。结果由于浏览器不支持，是否是很糟糕。对咱们是否须要使用降级方案仍是有很重要的参考意义的。

下面有两种经常使用的方法来帮助咱们来检测。

caniuse

Modernizr

Modernizr 是一个出色的可用于检测用户浏览器是否支持 HTML5 和 CSS3 功能的库。

if (Modernizr.draganddrop) {
  // Browser supports HTML5 DnD.
} else {
  // Fallback to a library solution.
}
复制代码

实现拖拽

HTML Attribute

实现拖拽元素只须要在dom标签上加入 draggable="true"

<div id="drag-source" draggable="true"></div>
复制代码

CSS User Interface

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 中使用拖拽

Vue 中使用 dnd 能够直接绑定 event 到组件上。

下面栗子包含的内容：

• 使用Vue实现拖放
• 拖放事件以及事件触发的时机
• 拖放事件的一些效果处理
• 拖拽系统文件到浏览器

DnD 能作什么？

• 提高网页上操做交互体验
• 提供列表排序功能
• 本机与浏览器交互
• HTML5游戏
• ...更多

推荐一些不错的DnD库

• interact.js - JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
• Sortable - Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices.
• draggable - The JavaScript Drag & Drop library your grandparents warned you about.
• Vue.Draggable - Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js
• vue-grid-layout - A draggable and resizable grid layout, for Vue.js.
• vue-draggable-resizable - Vue2 Component for draggable and resizable elements.
• react-dnd - Drag and Drop for React
• react-beautiful-dnd - Beautiful and accessible drag and drop for lists with React
• react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.

参考

Mozilla HTML_Drag_and_Drop_API

Native HTML5 Drag and Drop

caniuse

Working with HTML5 Drag-and-Drop

原文：使用 Drag and Drop 给Web应用提高交互体验