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 technology
Check 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.mozItemCount Read only
Gives the number of items in the drag operation.
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.

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

Example

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 Standard
The definition of 'DataTransfer' in that specification.
Living Standard 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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 4Edge Full support YesFirefox 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 10Opera Full support 12Safari Full support 3.1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 52Opera Android Full support YesSafari iOS No support NoSamsung Internet Android ?
DataTransfer() constructorChrome Full support 60Edge ? Firefox ? IE ? Opera Full support 47Safari ? WebView Android Full support 60Chrome Android Full support 60Edge Mobile ? Firefox Android ? Opera Android Full support 47Safari iOS No support NoSamsung Internet Android ?
addElement
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
clearDataChrome Full support YesEdge ? Firefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?
dropEffectChrome Full support YesEdge ? Firefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?
effectAllowedChrome Full support YesEdge ? Firefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?
filesChrome Full support YesEdge ? Firefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?
getDataChrome Full support YesEdge ? Firefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?
itemsChrome Full support 4Edge Full support YesFirefox Full support 50IE No support NoOpera Full support 12Safari No support NoWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 50Opera Android Full support YesSafari iOS No support NoSamsung Internet Android ?
mozClearDataAt
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozCursor
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozGetDataAt
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozItemCount
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozSetDataAt
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozSourceNode
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozTypesAt
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
mozUserCancelled
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support YesIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android ? Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
setDataChrome Full support YesEdge ? Firefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?
setDragImageChrome Full support YesEdge Full support 18Firefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?
typesChrome Full support YesEdge ? Firefox Full support YesIE ? Opera ? Safari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support YesOpera Android ? Safari iOS ? Samsung Internet Android ?

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