作者:永无止境 | 来源:互联网 | 2023-01-20 17:09
在html5中要实现拖放操作,相对于以前通过鼠标操作实现,要简单得多,数据安全性也更有保障。只需要以下几步即可。给被拖拽元素添加draggable属性,如果是文件拖放。在拖拽元素的
在html5中要实现拖放操作,相对于以前通过鼠标操作实现,要简单得多,数据安全性也更有保障。只需要以下几步即可。
- 给被拖拽元素添加
draggable
属性,如果是文件拖放。
- 在拖拽元素的
dragstart
中初始化相关的数据信息,主要是DataTransfer
对象。
- 在目标元素的
dragover
事件中,取消其默认操作。
- 在目标元素的
drop
事件中,处理接受到的数据。
- 在被拖拽元素的
dragend
事件中,做善后工作。若没有则可以省略。
大致代码如下:
"source" draggable="draggable">source
"target">target
draggable属性
draggable是一个枚举属性,用于指定一个标签是否可以被拖拽。有以下四种取值:
true
:表示此元素可拖拽。
false
:表示此元素不可拖拽。
auto
:除img
和带href
的标签a
标签表示可拖拽外,其它标签均表示不可拖拽。
- 其它任何值:表示不可拖拽。
拖动什么 - ondragstart 和 setData()
ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值。
放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法。
html 5 实现拖放效果