摘要：注意點在鼠標操作拖放期間，有一些事件可能觸發多次，比如和。可拖拽元素，建議使用，設定可拖拽元素的鼠標游標，提升交互。在中使用拖拽中使用可以直接綁定到組件上。

簡單來說，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個

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

在 dragover 事件中使用 event.preventDefault() 阻止默認事件行為時，才能正確觸發 drop 事件

在 Firefox 瀏覽器中觸發 drop 時要使用 event.preventDefault() 阻止默認事件行為，以防止打開一個新的標簽

HTML拖拽的數據接口有三個 DataTransfer、DataTransferItem 和 DataTransferItemList。

在進行拖放操作時，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來實現的豐富可交互式的應用。結果因為瀏覽器不支持，是不是很糟糕。對我們是否需要使用降級方案還是有很重要的參考意義的。

下面有兩種常用的方法來幫助我們來檢測。

Modernizr 是一個出色的可用于檢測用戶瀏覽器是否支持 HTML5 和 CSS3 功能的庫。

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

實現拖拽元素只需要在dom標簽上加入 draggable="true"

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 到組件上。

下面栗子包含的內容：

使用Vue實現拖放

拖放事件以及事件觸發的時機

拖放事件的一些效果處理

拖拽系統文件到瀏覽器

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

提升網頁上操作交互體驗

提供列表排序功能

本機與瀏覽器交互

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應用提升交互體驗