DataTransfer - 用于保存拖放操作期间拖动的数据

DataTransfer 对象用于保存拖放操作期间拖动的数据。它可以包含一个或多个数据项,每个数据项包含一种或多种数据类型。有关拖放的详细信息,请参阅HTML 拖放 API

该对象可从 drag eventsdataTransfer 属性获得。

构造函数

DataTransfer()

创建并返回一个新的 DataTransfer 对象。

属性

标准属性

DataTransfer.dropEffect

获取当前选定的拖放操作的类型,或将操作设置为新类型。值必须是 nonecopylinkmove

DataTransfer.effectAllowed

提供可能的所有类型的操作。必须是 nonecopycopyLinkcopyMovelinklinkMovemovealluninitialized 之一。

DataTransfer.files

包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件,则该属性为空列表。

DataTransfer.items 只读

给出 DataTransferItemList 对象,该对象是所有拖动数据的列表。

DataTransfer.types 只读

一个 strings 数组,给出 dragstart 事件中设置的格式。

Gecko 属性

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

注意: 本节中的所有属性都是 Gecko 特有的。

DataTransfer.mozCursor

给出拖动光标的状态。这主要用于在标签拖动期间控制光标。

DataTransfer.mozItemCount 只读

提供拖动操作中的项目数。

DataTransfer.mozSourceNode 只读

按下按钮以启动拖动操作时鼠标光标所在的 Node。对于外部拖动,或者如果调用者无法访问节点,该值为 null

DataTransfer.mozUserCancelled 只读

该属性仅适用于 dragend 事件,如果用户通过按 escape 取消拖动操作,则该属性为 true。在所有其他情况下,它将是 false,包括由于任何其他原因导致拖动失败,例如由于无效位置的丢失。

方法

标准方法

DataTransfer.clearData()

删除与给定类型关联的数据。type 参数是可选的。如果类型为空或未指定,则删除与所有类型关联的数据。如果指定类型的数据不存在,或者数据传输不包含任何数据,则该方法无效。

DataTransfer.getData()

检索给定类型的数据,如果该类型的数据不存在或数据传输不包含数据,则返回空字符串。

DataTransfer.setData()

设置给定类型的数据。如果该类型的数据不存在,则在末尾添加。如果该类型的数据已存在,则替换掉相同位置的数据。

DataTransfer.setDragImage()

如果需要自定义图像,请设置用于拖动的图像。

Gecko 方法

非标准
该功能是非标准的。请尽量不要在生产环境中使用它:因为每个用户不一定会正常运行。它的实现可能存在很大的不兼容性,并且将来可能会改变行为。

注意: 本节中的所有方法都是 Gecko 特有的。

DataTransfer.addElement()

将拖动源设置为给定元素。

DataTransfer.mozClearDataAt()

删除与指定索引处的项目的给定格式关联的数据。索引的范围从零到项目数减一。

DataTransfer.mozGetDataAt()

检索与指定索引处的项目的给定格式关联的数据,如果不存在,则返回 null。索引应该在从零到项目数减一的范围内。

DataTransfer.mozSetDataAt()

数据传输可以存储多个项目,每个项目从零开始索引。

DataTransfer.mozTypesAt()

保存为指定索引处的项目存储的数据的格式类型列表。如果索引不在 0 到项目数减 1 的范围内,则返回空字符串列表。

规范

规范 状态 备注
HTML Living Standard
DataTransfer 的定义
现行的标准 mozCursormozItemCountmozSourceNodemozUserCancelledaddElement()mozClearDataAt()mozGetDataAt()mozSetDataAt()mozTypesAt 是 Gecko 特有的。
HTML 5.1
DataTransfer 的定义
推荐 不包含在 W3C HTML5 中

桌面浏览器兼容性

特性 Chrome Edge Firefox Internet Explorer Opera Safari
基础支持 4 支持 3.51 10 12 3.1
DataTransfer() constructor 60 未知 未知 未知 47 未知
addElement 不支持 不支持 支持 不支持 不支持 不支持
clearData 支持 未知 支持 未知 未知 未知
dropEffect 支持 未知 支持 未知 未知 未知
effectAllowed 支持 未知 支持 未知 未知 未知
files 支持 未知 支持 未知 未知 未知
getData 支持 未知 支持 未知 未知 未知
items 4 支持 50 不支持 12 不支持
mozClearDataAt 不支持 不支持 支持 不支持 不支持 不支持
mozCursor 不支持 不支持 支持 不支持 不支持 不支持
mozGetDataAt 不支持 不支持 支持 不支持 不支持 不支持
mozItemCount 不支持 不支持 支持 不支持 不支持 不支持
mozSetDataAt 不支持 不支持 支持 不支持 不支持 不支持
mozSourceNode 不支持 不支持 支持 不支持 不支持 不支持
mozTypesAt 不支持 不支持 支持 不支持 不支持 不支持
mozUserCancelled 不支持 不支持 支持 不支持 不支持 不支持
setData 支持 未知 支持 未知 未知 未知
setDragImage 支持 未知 支持 未知 未知 未知
types 支持 未知 支持 未知 未知 未知

移动浏览器兼容性

特性 Android Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
基础支持 支持 支持 支持 52 未知 支持 不支持
DataTransfer() constructor 60 60 未知 未知 未知 47 不支持
addElement 不支持 不支持 不支持 未知 未知 不支持 不支持
clearData 支持 支持 未知 支持 未知 未知 未知
dropEffect 支持 支持 未知 支持 未知 未知 未知
effectAllowed 支持 支持 未知 支持 未知 未知 未知
files 支持 支持 未知 支持 未知 未知 未知
getData 支持 支持 未知 支持 未知 未知 未知
items 支持 支持 支持 50 未知 支持 不支持
mozClearDataAt 不支持 不支持 不支持 未知 未知 不支持 不支持
mozCursor 不支持 不支持 不支持 未知 未知 不支持 不支持
mozGetDataAt 不支持 不支持 不支持 未知 未知 不支持 不支持
mozItemCount 不支持 不支持 不支持 未知 未知 不支持 不支持
mozSetDataAt 不支持 不支持 不支持 未知 未知 不支持 不支持
mozSourceNode 不支持 不支持 不支持 未知 未知 不支持 不支持
mozTypesAt 不支持 不支持 不支持 未知 未知 不支持 不支持
mozUserCancelled 不支持 不支持 不支持 未知 未知 不支持 不支持
setData 支持 支持 未知 支持 未知 未知 未知
setDragImage 支持 支持 未知 支持 未知 未知 未知
types 支持 支持 未知 支持 未知 未知 未知

1. 从 Firefox 52 开始,DataTransfer.types 属性根据规范返回一个冻结的 DOMString 数组,而不是 DOMStringList

相关链接