DataTransfer

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()
Creates and returns a new 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 只读
Node 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

非标
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

注意: 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.

规范

规范 状态 Comment
HTML Living Standard
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.
Recommendation Not included in W3C HTML5 Recommendation

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
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
files 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
items 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
types Chrome Yes Edge 12 Firefox Yes IE 10
10
The property returns a DOMStringList .
Text is returned instead of text/plain
Opera Yes
Yes
As of Opera 12, Text 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

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
非标。预期跨浏览器支持较差。
非标。预期跨浏览器支持较差。
见实现注意事项。

另请参阅