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.
DataTransfer()
Creates and returns a new DataTransfer object.
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 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.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
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.
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.
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.
| Specification |
|---|
| HTML Standard # the-datatransfer-interface |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
DataTransfer |
59 | 17 | 62 | No | 46 | 14.1 | 59 | 59 | 62 | 44 | 14.5 | 8.0 |
DataTransfer |
3 | 12 |
3.5As of Firefox 52, theDataTransfer.types property returns a frozen array of DOMStrings as per spec, rather than a DOMStringList.
|
8 | 12 | 4 | ≤37 | 18 |
4As of Firefox 52, theDataTransfer.types property returns a frozen array of DOMStrings as per spec, rather than a DOMStringList.
|
12 | 3.2 | 1.0 |
addElement |
No | No | 3.5 | No | No | No | No | No | 4 | No | No | No |
clearData |
3 | 12 | 3.5 | 8 | ≤12.1 | 4 | ≤37 | 18 | 4 | ≤12.1 | 3.2 | 1.0 |
dropEffect |
3 | 12 | 3.5 | 8 | ≤12.1 | 4 | ≤37 | 18 | 4 | ≤12.1 | 3.2 | 1.0 |
effectAllowed |
3 | 12 | 3.5 | 8 | ≤12.1 | 4 | ≤37 | 18 | 4 | ≤12.1 | 3.2 | 1.0 |
files |
3 | 12 | 3.6 | 10 | ≤12.1 | 4 | ≤37 | 18 | 4 | ≤12.1 | 3.2 | 1.0 |
getData |
3 | 12 | 3.5 | 8 | ≤12.1 | 4 | ≤37 | 18 | 4 | ≤12.1 | 3.2 | 1.0 |
items |
3 | 12 | 50 | No | 12 | 11.1 | ≤37 | 18 | 52 | 12 | 11.3 | 1.0 |
mozCursor |
No | No | 3.5 | No | No | No | No | No | 4 | No | No | No |
mozSourceNode |
No | No | 4 | No | No | No | No | No | 4 | No | No | No |
mozUserCancelled |
No | No | 3.5 | No | No | No | No | No | 4 | No | No | No |
setData |
3 | 12 | 3.5 | 8 | 12 | 5 | ≤37 | 18 | 4 | 12 | 5 | 1.0 |
setDragImage |
3 | 18 | 3.5 | No | ≤12.1 | 4 | ≤37 | 18 | 4 | ≤12.1 | 3.2 | 1.0 |
types |
3 | 12 | 3.5 |
≤12.1As of Opera 12,Text is returned instead of text/plain
|
4 | ≤37 | 18 | 4 | ≤12.1 | 3.2 | 1.0 | |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer