November 18, 2018

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

#HTML5 #Vue.js

# 什么是 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

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

# Drop Target

事件 描述
dragenter 当拖动元素或选中的文本到一个可释放目标时触发。
dragover 当元素或选中的文本被拖到一个可释放目标上时触发(每100毫秒触发一次)。
dragexit 当元素变得不再是拖动操作的选中目标时触发。
dragleave 当拖动元素或选中的文本离开一个可释放目标时触发。
drop 当元素或选中的文本在可释放目标上被释放时触发。

# 注意点

  • 在鼠标操作拖放期间,有一些事件可能触发多次,(比如:dragdragover)。使用时注意防抖节流
  • dragover 事件中使用 event.preventDefault() 阻止默认事件行为时,才能正确触发 drop 事件
  • 在 Firefox 浏览器中触发 drop 时要使用 event.preventDefault() 阻止默认事件行为,以防止打开一个新的标签

# 数据接口

HTML拖拽的数据接口有三个 DataTransferDataTransferItemDataTransferItemList

在进行拖放操作时,DataTransfer 对象用来保存,通过拖放动作,拖动到浏览器的数据。它可以保存一项或多项数据、一种或者多种数据类型。

# DataTransfer 常用属性

属性 类型 描述
dropEffect String 获取 / 设置实际的放置效果,它应该始终设置成 effectAllowed 的可能值之一,copymovelinknone
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 是一个出色的可用于检测用户浏览器是否支持 HTML5CSS3 功能的库。

if (Modernizr.draganddrop) {
  // Browser supports HTML5 DnD.
} else {
  // Fallback to a library solution.
}
1
2
3
4
5

# 实现拖拽

# HTML Attribute

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

<div id="drag-source" draggable="true"></div>
1

# 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;
}
1
2
3
4
5
6
7
8
9

cursor

可拖拽元素,建议使用 cursor,设定可拖拽元素的鼠标游标,提升交互。

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

# 在 Vue 中使用拖拽

Vue 中使用 dnd 可以直接绑定 event 到组件上。

下面栗子包含的内容:

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

# 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