使用原生drag拖放元素时，event对象的dataTransfer属性们

最新推荐文章于 2022-11-28 18:38:25 发布

haoyanyu_

最新推荐文章于 2022-11-28 18:38:25 发布

阅读量4.3k

点赞数 9

分类专栏： HTML

本文链接：https://blog.csdn.net/haoyanyu_/article/details/103815488

版权

拖放元素时，拖放事件发生顺序如下：
dragstart ->drag -> dragenter -> dragover ->drop ->dragend 还有一个dragleave
他们的event对象特有一个dataTransfer属性，主要用于源元素和目标元素之间传递数据

dataTransfer属性如下：

该方法只能在dragstart中调用，其他事件回调中调用无效
key:数据的类型或格式（也可以自定义）

拖动文本（默认是text）或者从操作系统向浏览器拖拽文件时，无需调用，系统会自动完成

只能在drop中调用，获取具体的值

清空数据，该方法只接收一个参数，要删除的数据类型
参数是可选的，如果不传参，删除所有数据类型

设置或返回被拖动元素允许的操作行为。通常会与dropEffect结合使用
在dragstart中设置，其他事件回调中设置是无效的

设置目标元素上允许的拖放行为
可设置的值有：none copy link move
如果dropEffect的值不在effectAllowed范围内时拖放操作不会实现

文件信息，一般用于将文件从桌面拖动到浏览器目标区域

代表拖动数据

设置拖动时显示的图像信息，他可以是画布或者其他任何元素
element：要自定义显示的图像，
x：图像距离鼠标位置水平偏移量，
y：图像距离鼠标位置垂直偏移量

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

关注

专栏目录