拖放元素时,拖放事件发生顺序如下:
dragstart ->drag -> dragenter -> dragover ->drop ->dragend 还有一个dragleave
他们的event对象特有一个dataTransfer属性,主要用于源元素和目标元素之间传递数据
dataTransfer属性如下:
1. setData(key, value)
该方法只能在dragstart中调用,其他事件回调中调用无效
key:数据的类型或格式(也可以自定义)
名称 | 含义 |
---|---|
text/plain | 文本格式 |
text/html | html格式 |
text/uri-list | 链接格式 |
拖动文本(默认是text)或者从操作系统向浏览器拖拽文件时,无需调用,系统会自动完成
2. getData(key)
只能在drop中调用,获取具体的值
3. clearData([key])
清空数据,该方法只接收一个参数,要删除的数据类型
参数是可选的,如果不传参,删除所有数据类型
4. effectAllowed
设置或返回被拖动元素允许的操作行为。通常会与dropEffect结合使用
在dragstart中设置,其他事件回调中设置是无效的
名称 | 含义 |
---|---|
none | 不允许拖放,一旦设置了该属性,所有的拖放事件都无效了 |
copy | 复制拖动元素 |
move | 移动 |
link | 链接 |
copymove | 移动或者链接 |
copyLink | 复制或者链接 |
linkMove | 链接或者移动 |
all | 任何操作都允许 |
5. dropEffect
设置目标元素上允许的拖放行为
可设置的值有:none copy link move
如果dropEffect的值不在effectAllowed范围内时拖放操作不会实现
6. files
文件信息,一般用于将文件从桌面拖动到浏览器目标区域
7. items
代表拖动数据
8. setDragImage(element, x, y)
设置拖动时显示的图像信息, 他可以是画布或者其他任何元素
element:要自定义显示的图像,
x:图像距离鼠标位置水平偏移量,
y:图像距离鼠标位置垂直偏移量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">