Web/API/DataTransfer

From Get docs


The 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 Drag and Drop API.

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

Constructor

DataTransfer()
Creates and returns a new DataTransfer object.

Properties

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 nonecopylink 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 Read only
Gives a DataTransferItemList object which is a list of all of the drag data.
DataTransfer.types Read only
An array of strings giving the formats that were set in the dragstart event.

Gecko properties

This is an experimental technologyCheck the Browser compatibility table carefully before using this in production.


Note: 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 Read only
The 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 Read only
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.

Deprecated properties

DataTransfer.mozItemCount Read only '
Gives the number of items in the drag operation. Removed in Firefox 71.

Methods

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

Non-standard 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.


Note: All of the methods in this section are Gecko-specific.

DataTransfer.addElement()
Sets the drag source to the given element.

Deprecated methods

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.

Examples

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.

Specifications

Specification Status Comment
HTML Living StandardThe definition of 'DataTransfer' in that specification. Living Standard mozCursor, mozItemCount, mozSourceNode, mozUserCancelled, addElement(), mozClearDataAt(), mozGetDataAt(), mozSetDataAt() and mozTypesAt are Gecko specific.
HTML 5.1The definition of 'DataTransfer' in that specification. Recommendation Not included in W3C HTML5 Recommendation

Browser compatibility

Update compatibility data on 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

Full support 3

Edge

Full support 12

Firefox Full support 3.5

Notes'

Full support 3.5

Notes'

Notes' As of Firefox 52, the DataTransfer.types property returns a frozen array of DOMStrings as per spec, rather than a DOMStringList.

IE

Full support 10

Opera

Full support 12

Safari

Full support 3.1

WebView Android

Full support ≤37

Chrome Android

Full support 18

Firefox Android Full support 4

Notes'

Full support 4

Notes'

Notes' As of Firefox 52, the DataTransfer.types property returns a frozen array of DOMStrings as per spec, rather than a DOMStringList.

Opera Android

Full support 12

Safari iOS

Full support 2

Samsung Internet Android

Full support 1.0

DataTransfer() constructor Chrome

Full support 60

Edge

Full support ≤79

Firefox

?

IE

No support No

Opera

Full support 47

Safari

No support No

WebView Android

Full support 60

Chrome Android

Full support 60

Firefox Android

?

Opera Android

Full support 44

Safari iOS

No support No

Samsung Internet Android

Full support 8.0

addElement

Experimental'Non-standard'

Chrome

No support No

Edge

No support No

Firefox

Full support Yes

IE

No support No

Opera

No support No

Safari

No support No

WebView Android

No support No

Chrome Android

No support No

Firefox Android

?

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android

No support No

clearData Chrome

Full support Yes

Edge

Full support 12

Firefox

Full support Yes

IE

?

Opera

Full support Yes

Safari

Full support Yes

WebView Android

Full support Yes

Chrome Android

Full support Yes

Firefox Android

Full support Yes

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support Yes

dropEffect Chrome

Full support Yes

Edge

Full support 12

Firefox

Full support Yes

IE

?

Opera

Full support Yes

Safari

Full support Yes

WebView Android

Full support Yes

Chrome Android

Full support Yes

Firefox Android

Full support Yes

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support Yes

effectAllowed Chrome

Full support Yes

Edge

Full support 12

Firefox

Full support Yes

IE

?

Opera

Full support Yes

Safari

Full support Yes

WebView Android

Full support Yes

Chrome Android

Full support Yes

Firefox Android

Full support Yes

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support Yes

files Chrome

Full support Yes

Edge

Full support 12

Firefox

Full support Yes

IE

?

Opera

Full support Yes

Safari

Full support Yes

WebView Android

Full support Yes

Chrome Android

Full support Yes

Firefox Android

Full support Yes

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support Yes

getData Chrome

Full support Yes

Edge

Full support 12

Firefox

Full support Yes

IE

?

Opera

Full support Yes

Safari

Full support Yes

WebView Android

Full support Yes

Chrome Android

Full support Yes

Firefox Android

Full support Yes

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support Yes

items Chrome

Full support 4

Edge

Full support 12

Firefox

Full support 50

IE

No support No

Opera

Full support 12

Safari

No support No

WebView Android

Full support Yes

Chrome Android

Full support Yes

Firefox Android

Full support 52

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support Yes

mozClearDataAt

Experimental'Non-standard'

Chrome

No support No

Edge

No support No

Firefox

No support ? — 71

IE

No support No

Opera

No support No

Safari

No support No

WebView Android

No support No

Chrome Android

No support No

Firefox Android

?

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android

No support No

mozCursor

Experimental'Non-standard'

Chrome

No support No

Edge

No support No

Firefox

Full support Yes

IE

No support No

Opera

No support No

Safari

No support No

WebView Android

No support No

Chrome Android

No support No

Firefox Android

?

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android

No support No

mozGetDataAt

Experimental'Non-standard'

Chrome

No support No

Edge

No support No

Firefox

No support ? — 71

IE

No support No

Opera

No support No

Safari

No support No

WebView Android

No support No

Chrome Android

No support No

Firefox Android

?

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android

No support No

mozItemCount

Experimental'Non-standard'

Chrome

No support No

Edge

No support No

Firefox

No support ? — 71

IE

No support No

Opera

No support No

Safari

No support No

WebView Android

No support No

Chrome Android

No support No

Firefox Android

?

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android

No support No

mozSetDataAt

Experimental'Non-standard'

Chrome

No support No

Edge

No support No

Firefox

No support ? — 71

IE

No support No

Opera

No support No

Safari

No support No

WebView Android

No support No

Chrome Android

No support No

Firefox Android

?

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android

No support No

mozSourceNode

Experimental'Non-standard'

Chrome

No support No

Edge

No support No

Firefox

Full support Yes

IE

No support No

Opera

No support No

Safari

No support No

WebView Android

No support No

Chrome Android

No support No

Firefox Android

?

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android

No support No

mozTypesAt

Experimental'Non-standard'

Chrome

No support No

Edge

No support No

Firefox

No support ? — 71

IE

No support No

Opera

No support No

Safari

No support No

WebView Android

No support No

Chrome Android

No support No

Firefox Android

?

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android

No support No

mozUserCancelled

Experimental'Non-standard'

Chrome

No support No

Edge

No support No

Firefox

Full support Yes

IE

No support No

Opera

No support No

Safari

No support No

WebView Android

No support No

Chrome Android

No support No

Firefox Android

?

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android

No support No

setData Chrome

Full support 3

Edge

Full support 12

Firefox

Full support 10

IE

No support No

Opera

Full support 12

Safari

Full support 5

WebView Android

Full support ≤37

Chrome Android

Full support 18

Firefox Android

Full support 10

Opera Android

Full support 12

Safari iOS

Full support 5

Samsung Internet Android

Full support 1.0

setDragImage Chrome

Full support Yes

Edge

Full support 18

Firefox

Full support Yes

IE

?

Opera

Full support Yes

Safari

Full support Yes

WebView Android

Full support Yes

Chrome Android

Full support Yes

Firefox Android

Full support Yes

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support Yes

types Chrome

Full support Yes

Edge

Full support 12

Firefox

Full support Yes

IE Full support 10

Notes'

Full support 10

Notes'

Notes' The property returns a DOMStringList. Notes' Text is returned instead of text/plain

Opera Full support Yes

Notes'

Full support Yes

Notes'

Notes' As of Opera 12, Text is returned instead of text/plain

Safari

Full support Yes

WebView Android

Full support Yes

Chrome Android

Full support Yes

Firefox Android

Full support Yes

Opera Android

Full support Yes

Safari iOS

No support No

Samsung Internet Android

Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.'
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.'
Non-standard. Expect poor cross-browser support.
See implementation notes.'
See implementation notes.


See also