在此页

• 构造函数
• 特性
• 方法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see HTML 拖放 API .

This object is available from the dataTransfer property of all drag events .

构造函数

DataTransfer()

创建并返回新 DataTransfer 对象。

特性

Standard properties

DataTransfer.dropEffect

Gets the type of drag-and-drop operation currently selected or sets the operation to a new type. The value must be none , copy , link or move .

DataTransfer.effectAllowed

Provides all of the types of operations that are possible. Must be one of none , copy , copyLink , copyMove , link , linkMove , move , all or uninitialized .

DataTransfer.files

Contains a list of all the local files available on the data transfer. If the drag operation doesn't involve dragging files, this property is an empty list.

DataTransfer.items 只读

Gives a DataTransferItemList object which is a list of all of the drag data.

DataTransfer.types 只读

An array of strings giving the formats that were set in the dragstart 事件。

Gecko properties

这是 实验性技术
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。

注意： All of the properties in this section are Gecko-specific.

DataTransfer.mozCursor

Gives the drag cursor's state. This is primarily used to control the cursor during tab drags.

DataTransfer.mozSourceNode 只读

节点 over which the mouse cursor was located when the button was pressed to initiate the drag operation. This value is null for external drags or if the caller can't access the node.

DataTransfer.mozUserCancelled 只读

This property applies only to the dragend event, and is true if the user canceled the drag operation by pressing escape. It will be false in all other cases, including if the drag failed for any other reason, for instance due to a drop over an invalid location.

弃用特性

DataTransfer.mozItemCount 只读

Gives the number of items in the drag operation. Removed in Firefox 71.

方法

Standard methods

DataTransfer.clearData()

Remove the data associated with a given type. The type argument is optional. If the type is empty or not specified, the data associated with all types is removed. If data for the specified type does not exist, or the data transfer contains no data, this method will have no effect.

DataTransfer.getData()

Retrieves the data for a given type, or an empty string if data for that type does not exist or the data transfer contains no data.

DataTransfer.setData()

Set the data for a given type. If data for the type does not exist, it is added at the end, such that the last item in the types list will be the new format. If data for the type already exists, the existing data is replaced in the same position.

DataTransfer.setDragImage()

Set the image to be used for dragging if a custom one is desired.

Gecko methods

非标
此特征是非标准的，且不在标准轨道中。不要在面向 Web 的生产站点中使用它：它不适用于每个用户。实现之间可能存在大的不兼容性，且行为将来可能改变。

注意： All of the methods in this section are Gecko-specific.

DataTransfer.addElement()

Sets the drag source to the given element.

弃用方法

DataTransfer.mozClearDataAt()

Removes the data associated with the given format for an item at the specified index. The index is in the range from zero to the number of items minus one. Removed in Firefox 71.

DataTransfer.mozGetDataAt()

Retrieves the data associated with the given format for an item at the specified index, or null if it does not exist. The index should be in the range from zero to the number of items minus one. Removed in Firefox 71.

DataTransfer.mozSetDataAt()

A data transfer may store multiple items, each at a given zero-based index. mozSetDataAt() may only be called with an index argument less than mozItemCount in which case an existing item is modified, or equal to mozItemCount in which case a new item is added, and the mozItemCount is incremented by one. Removed in Firefox 71.

DataTransfer.mozTypesAt()

Holds a list of the format types of the data that is stored for an item at the specified index. If the index is not in the range from 0 to the number of items minus one, an empty string list is returned. Removed in Firefox 71.

范例

Every method and property listed in this document has its own reference page and each reference page either directly includes an example of the interface or has a link to an example.

规范

规范	状态	注释
HTML 实时标准 The definition of 'DataTransfer' in that specification.	实时标准	mozCursor , mozItemCount , mozSourceNode , mozUserCancelled , addElement() , mozClearDataAt() , mozGetDataAt() , mozSetDataAt() and mozTypesAt are Gecko specific.
HTML 5.1 The definition of 'DataTransfer' in that specification.	推荐	Not included in W3C HTML5 推荐

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
DataTransfer	Chrome 3	Edge 12	Firefox 3.5 3.5 As of Firefox 52, the DataTransfer.types property returns a frozen array of DOMString s as per spec, rather than a DOMStringList .	IE 10	Opera 12	Safari 3.1	WebView Android ≤37	Chrome Android 18	Firefox Android 4 4 As of Firefox 52, the DataTransfer.types property returns a frozen array of DOMString s as per spec, rather than a DOMStringList .	Opera Android 12	Safari iOS 2	Samsung Internet Android 1.0
DataTransfer() 构造函数	Chrome 60	Edge ≤79	Firefox ?	IE No	Opera 47	Safari No	WebView Android 60	Chrome Android 60	Firefox Android ?	Opera Android 44	Safari iOS No	Samsung Internet Android 8.0
addElement 非标	Chrome No	Edge No	Firefox Yes	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android ?	Opera Android No	Safari iOS No	Samsung Internet Android No
clearData	Chrome Yes	Edge 12	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS No	Samsung Internet Android Yes
dropEffect	Chrome Yes	Edge 12	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS No	Samsung Internet Android Yes
effectAllowed	Chrome Yes	Edge 12	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS No	Samsung Internet Android Yes
文件	Chrome Yes	Edge 12	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS No	Samsung Internet Android Yes
getData	Chrome Yes	Edge 12	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS No	Samsung Internet Android Yes
项	Chrome 4	Edge 12	Firefox 50	IE No	Opera 12	Safari No	WebView Android Yes	Chrome Android Yes	Firefox Android 52	Opera Android Yes	Safari iOS No	Samsung Internet Android Yes
mozClearDataAt 非标	Chrome No	Edge No	Firefox ? — 71	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android ?	Opera Android No	Safari iOS No	Samsung Internet Android No
mozCursor 非标	Chrome No	Edge No	Firefox Yes	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android ?	Opera Android No	Safari iOS No	Samsung Internet Android No
mozGetDataAt 非标	Chrome No	Edge No	Firefox ? — 71	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android ?	Opera Android No	Safari iOS No	Samsung Internet Android No
mozItemCount 非标	Chrome No	Edge No	Firefox ? — 71	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android ?	Opera Android No	Safari iOS No	Samsung Internet Android No
mozSetDataAt 非标	Chrome No	Edge No	Firefox ? — 71	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android ?	Opera Android No	Safari iOS No	Samsung Internet Android No
mozSourceNode 非标	Chrome No	Edge No	Firefox Yes	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android ?	Opera Android No	Safari iOS No	Samsung Internet Android No
mozTypesAt 非标	Chrome No	Edge No	Firefox ? — 71	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android ?	Opera Android No	Safari iOS No	Samsung Internet Android No
mozUserCancelled 非标	Chrome No	Edge No	Firefox Yes	IE No	Opera No	Safari No	WebView Android No	Chrome Android No	Firefox Android ?	Opera Android No	Safari iOS No	Samsung Internet Android No
setData	Chrome 3	Edge 12	Firefox 10	IE No	Opera 12	Safari 5	WebView Android ≤37	Chrome Android 18	Firefox Android 10	Opera Android 12	Safari iOS 5	Samsung Internet Android 1.0
setDragImage	Chrome Yes	Edge 18	Firefox Yes	IE ?	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS No	Samsung Internet Android Yes
类型	Chrome Yes	Edge 12	Firefox Yes	IE 10 10 The property returns a DOMStringList . 文本 is returned instead of text/plain	Opera Yes Yes As of Opera 12, 文本 is returned instead of text/plain	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS No	Samsung Internet Android Yes

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

非标。预期跨浏览器支持较差。

非标。预期跨浏览器支持较差。

见实现注意事项。

另请参阅

• 拖放
• Drag Operations
• Recommended Drag Types
• Dragging and Dropping Multiple Items
• DataTransfer test - Paste or Drag

元数据

• 最后修改： Nov 6, 2019

相关话题

1. HTML 拖放 API
2. DataTransfer
3. 构造函数

   1. DataTransfer()
4. 特性

   1. dropEffect
   2. effectAllowed
   3. 文件
   4. 项
   5. mozCursor
   6. mozItemCount
   7. mozSourceNode
   8. mozUserCancelled
   9. 类型
5. 方法

   1. addElement()
   2. clearData()
   3. getData()
   4. mozClearDataAt()
   5. mozGetDataAt()
   6. mozSetDataAt()
   7. mozTypesAt()
   8. setData()
   9. setDragImage()
6. Related pages for HTML Drag and Drop API

   1. DataTransferItem
   2. DataTransferItemList
   3. DragEvent