拖放流程
用户能够将一个可拖动元素移动到另一个可放置元素中,释放鼠标来应用这些改变。
拖放总的来说有三步: 鼠标按下、移动和释放
- 拖放元素,设置属性
draggable="true"
使其可拖动 - 拖拽移动过程
- 拖拽释放区域
拖放事件
拖放过程中会触发多个事件,这些事件会作用于两种对象元素上,一种是被拖动的元素,另外一种是放置目标元素。
拖动期间像mousemove
等事件均不会被触发。如果由本地向浏览器拖放文件,dragstart
和dragend
也不会被触发。
事件 | 对象 | 作用 |
---|---|---|
dragstart | src | 元素开始被拖动的时候触发 |
dragenter | target | 拖动元素鼠标进入到目标区域时触发 |
dragover | target | 拖动元素在目标区域移动时触发 |
dragleave | target | 拖动元素鼠标离开目标区域时触发 |
drag | src | 拖放过程中在被拖动元素上连续触发 |
drop | target | 释放时触发,目标元素 |
dragend | src | 释放时触发,被拖动元素 |
在默认的情况下,浏览器会阻止所有的拖放操作,所以在进入到目标区域时需要阻止浏览器的默认行为。也就是在dragenter
和dragover
的事件中取消浏览器默认行为,使元素可以被拖放。
拖放数据
拖放事件初始化后会生成一个dataTransfer
对象,其中保存了所有拖放数据。
通过浏览器控制台打印这个对象,可以看到有如下属性和方法:
其中
effectAllowed
:限定可操作类型,取值[copy,move,link,copyLink,copyMove,limkMove,all, none,uninitialized]
dropEffect
: 设置光标类型,取值是effectAllowed
中设置的,但是只有[copy,move,link,none]
可被设定files
:读取可用的本地文件列表items
:保存了DataTransferItemList
对象types
:保存DataTransfer
设置的数据类型
方法
setData(format, data)
:在dataTransfer
中设置数据,常见类型Drag TypesgetData(format)
: 获取设置的对应格式数据clearData(format)
: 清除指定格式数据setDragImage(image, xOffset, yOffset)
:设置拖动反馈图片
举个栗子
知道了上面的概念之后,就可以进行实际的操作了。
参考资料
https://developer.mozilla.org/zh-CN/docs/DragDrop/Drag_and_Drop