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
none
,copy
,link
ormove
. DataTransfer.effectAllowed
- Provides all of the types of operations that are possible. Must be one of
none
,copy
,copyLink
,copyMove
,link
,linkMove
,move
,all
oruninitialized
. 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 thedragstart
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 isnull
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 istrue
if the user canceled the drag operation by pressing escape. It will befalse
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 thanmozItemCount
in which case an existing item is modified, or equal tomozItemCount
in which case a new item is added, and themozItemCount
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
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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
DataTransfer
|
Chrome
Full support 3 |
Edge
Full support 12 |
Firefox Full support 3.5 Full support 3.5 Notes' As of Firefox 52, the |
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 Full support 4 Notes' As of Firefox 52, the |
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 |
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 |
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 | |
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 | |
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 | |
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 | |
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 | |
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 | |
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 | |
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 Full support 10 Notes' The property returns a |
Opera Full support Yes Full support Yes Notes' As of Opera 12, |
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
- Drag and drop
- Drag Operations
- Recommended Drag Types
- Dragging and Dropping Multiple Items
- DataTransfer test - Paste or Drag
DataTransfer by Mozilla Contributors is licensed under CC-BY-SA 2.5.