内容简介:简单来说,HTML5 提供了我相信每个人都或多或少接触过拖放,比如浏览器多标签页之间的可拖放排序、手机中的App可以随便拖放排序等等,
什么是 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 | 当元素或选中的文本在可释放目标上被释放时触发。 |
注意点
- 在鼠标操作拖放期间,有一些事件可能触发多次,(比如:
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
到组件上。
下面栗子包含的内容:
以上所述就是小编给大家介绍的《使用 Drag and Drop 给Web应用提升交互体验》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- CSS变量对JS交互组件开发带来的提升与变革
- 喧喧发布 2.5.3 版本,主要提升系统稳定性,优化交互体验
- SpreadJS v13.0 发布,聚焦表单设计与数据交互,大幅提升工作效率!
- iOS 12 人机交互指南:交互(User Interaction)
- 生活NLP云服务“玩秘”站稳人机交互2.0语音交互场景
- asyncio之子进程交互
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。