资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/使用 Drag and Drop 给Web应用提升交互体验

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

legendmohe / 702人阅读

摘要：注意点在鼠标操作拖放期间，有一些事件可能触发多次，比如和。可拖拽元素，建议使用，设定可拖拽元素的鼠标游标，提升交互。在中使用拖拽中使用可以直接绑定到组件上。

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

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实现拖放

拖放事件以及事件触发的时机

拖放事件的一些效果处理

拖拽系统文件到浏览器

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

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应用提升交互体验
私有云 服务器托管 云计算and应用 web应用 防火墙如何使用 web应用防火墙使用手册 阿里云使用的web应用服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53304.html

相关文章

  • 原生JS快速实现拖放（drag and drop）效果

    摘要：接下来我们就用原生和快速实现这样的拖放效果的内容很简单，就是五个空的容器和一个可以被拖拽的元素注意点容器的的为，用于接收被拖拽的元素，可被拖拽的元素为，同时设置属性为，表示该元素可以被拖拽。 拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： showImg(https://s...

    jzzlee 评论0 收藏0

  • 原生JS快速实现拖放（drag and drop）效果

    摘要：接下来我们就用原生和快速实现这样的拖放效果的内容很简单，就是五个空的容器和一个可以被拖拽的元素注意点容器的的为，用于接收被拖拽的元素，可被拖拽的元素为，同时设置属性为，表示该元素可以被拖拽。 拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： showImg(https://s...

    objc94 评论0 收藏0

  • 原生JS快速实现拖放（drag and drop）效果

    摘要：接下来我们就用原生和快速实现这样的拖放效果的内容很简单，就是五个空的容器和一个可以被拖拽的元素注意点容器的的为，用于接收被拖拽的元素，可被拖拽的元素为，同时设置属性为，表示该元素可以被拖拽。 拖放是很常见的一种交互效果，很多时候我们都会借助于第三方的控件来实现，其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果： showImg(https://s...

    arashicage 评论0 收藏0

  • 原生拖拽,拖放事件(drag and drop)

    摘要：原生拖拽拖放事件拖拽拖放事件可以通过拖拽实现数据传递达到良好的交互效果如从操作系统拖拽文件实现文件选择拖拽实现元素布局的修改事件流程一个完整的流程通常包含以下几个步骤设置可拖拽目标设置属性实现元素的可拖拽监听设置拖拽数据为拖拽操作设置反馈图 原生拖拽,拖放事件(drag and drop) 拖拽,拖放事件可以通过拖拽实现数据传递,达到良好的交互效果,如:从操作系统拖拽文件实现文件选择...

    Sleepy 评论0 收藏0

  • Android Nougat - 有点好玩的Multi-Window

    摘要：如果设备没有处于模式，则该无效。这个方法有两个入参，第一个入参表示显示的尺寸，第二个入参表示移动时，与手指的接触位置。表示该过程的离开目标控件的边界。我们可以在这个事件发生时获取到此次传递的数据，并且做相应的处理。表示一次过程的结束。 开始的开始 自从我的Nexus 6加入了Android beta计划以来，我便在很早的时候就体验上了Android Nougat的一些新特性，自然也体验...

    notebin 评论0 收藏0

发表评论

登陆后可评论

0条评论

legendmohe

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<