摘要：注意點(diǎn)在鼠標(biāo)操作拖放期間，有一些事件可能觸發(fā)多次，比如和?？赏献г?，建議使用，設(shè)定可拖拽元素的鼠標(biāo)游標(biāo)，提升交互。在中使用拖拽中使用可以直接綁定到組件上。

簡(jiǎn)單來(lái)說(shuō)，HTML5 提供了 Drag and Drop API，允許用戶用鼠標(biāo)選中一個(gè)可拖動(dòng)元素，移動(dòng)鼠標(biāo)拖放到一個(gè)可放置到元素的過(guò)程。

我相信每個(gè)人都或多或少接觸過(guò)拖放，比如瀏覽器多標(biāo)簽頁(yè)之間的可拖放排序、手機(jī)中的App可以隨便拖放排序等等，Drag and Drop 已經(jīng)給我們提供了更便捷、更靈活的網(wǎng)絡(luò)應(yīng)用體驗(yàn)。

DnD 規(guī)范定義了基于事件的拖放機(jī)制和附加標(biāo)記，以標(biāo)記網(wǎng)頁(yè)上幾乎所有 draggable 的元素類型，一個(gè)典型的 drag 操作是這樣開始的：用戶用鼠標(biāo)選中一個(gè)可拖動(dòng)的（draggable）元素，移動(dòng)鼠標(biāo)到一個(gè)可放置的（droppable）元素，然后釋放鼠標(biāo)。 在操作期間，會(huì)觸發(fā)一些事件類型，有一些事件類型可能會(huì)被多次觸發(fā)（比如drag 和 dragover 事件類型）。

總結(jié)起來(lái)很簡(jiǎn)單：

Drag Source(What to drag) => Drop Target(Where to drop)

所有的拖拽事件都對(duì)應(yīng)一個(gè) global event handler，Dnd API 一個(gè)有8個(gè)事件，可以分為綁定在 Drag Source 上3個(gè)、綁定在 Drag Target 上5個(gè)

在鼠標(biāo)操作拖放期間，有一些事件可能觸發(fā)多次，（比如：drag 和 dragover）。使用時(shí)注意防抖或節(jié)流

在 dragover 事件中使用 event.preventDefault() 阻止默認(rèn)事件行為時(shí)，才能正確觸發(fā) drop 事件

在 Firefox 瀏覽器中觸發(fā) drop 時(shí)要使用 event.preventDefault() 阻止默認(rèn)事件行為，以防止打開一個(gè)新的標(biāo)簽

HTML拖拽的數(shù)據(jù)接口有三個(gè) DataTransfer、DataTransferItem 和 DataTransferItemList。

在進(jìn)行拖放操作時(shí)，DataTransfer 對(duì)象用來(lái)保存，通過(guò)拖放動(dòng)作，拖動(dòng)到瀏覽器的數(shù)據(jù)。它可以保存一項(xiàng)或多項(xiàng)數(shù)據(jù)、一種或者多種數(shù)據(jù)類型。

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)

通過(guò)定義 MIME (Multipurpose Internet Mail Exchange)來(lái)指定數(shù)據(jù)傳輸類型，例如：text/plain

想象一下我們想開發(fā)一個(gè)使用HTML5 DnD API來(lái)實(shí)現(xiàn)的豐富可交互式的應(yīng)用。結(jié)果因?yàn)闉g覽器不支持，是不是很糟糕。對(duì)我們是否需要使用降級(jí)方案還是有很重要的參考意義的。

下面有兩種常用的方法來(lái)幫助我們來(lái)檢測(cè)。

Modernizr 是一個(gè)出色的可用于檢測(cè)用戶瀏覽器是否支持 HTML5 和 CSS3 功能的庫(kù)。

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

實(shí)現(xiàn)拖拽元素只需要在dom標(biāo)簽上加入 draggable="true"

user-select

可拖拽元素，建議使用 user-select，避免用戶在拖拽時(shí)選取到內(nèi)部元素。

[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，設(shè)定可拖拽元素的鼠標(biāo)游標(biāo)，提升交互。

[draggable="true"] {
  cursor: move;
}

Vue 中使用 dnd 可以直接綁定 event 到組件上。

下面栗子包含的內(nèi)容：

使用Vue實(shí)現(xiàn)拖放

拖放事件以及事件觸發(fā)的時(shí)機(jī)

拖放事件的一些效果處理

拖拽系統(tǒng)文件到瀏覽器

https://codesandbox.io/embed/...

提升網(wǎng)頁(yè)上操作交互體驗(yàn)

提供列表排序功能

本機(jī)與瀏覽器交互

HTML5游戲

...更多

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應(yīng)用提升交互體驗(yàn)