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. It cannot be created separately (i.e. there is no constructor for this 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,linkormove. DataTransfer.effectAllowed- Provides all of the types of operations that are possible. Must be one of
none,copy,copyLink,copyMove,link,linkMove,move,alloruninitialized. 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.itemsRead only- Gives a
DataTransferItemListobject which is a list of all of the drag data. DataTransfer.typesRead only- An array of
stringsgiving the formats that were set in thedragstartevent.
Gecko properties
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
DataTransfer.mozCursor- Gives the drag cursor's state. This is primarily used to control the cursor during tab drags.
DataTransfer.mozItemCountRead only- Gives the number of items in the drag operation.
DataTransfer.mozSourceNodeRead only- The
Nodeover which the mouse cursor was located when the button was pressed to initiate the drag operation. This value isnullfor external drags or if the caller can't access the node. DataTransfer.mozUserCancelledRead only- This property applies only to the
dragendevent, and istrueif the user canceled the drag operation by pressing escape. It will befalsein 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
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
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 thanmozItemCountin which case an existing item is modified, or equal tomozItemCountin which case a new item is added, and themozItemCountis 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
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 4 | (Yes) | 3.5 [2] 52 (52)[3] |
10 [1] [2] | 12 | 3.1 [2] |
items property |
4 | (Yes) | 50 | No support | 12 | No support |
| Feature | Android | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|---|---|
| Basic support | No support | No support | No support | (Yes) | (Yes) 52.0 (52)[3] |
No support | 10[1][2] | No support | No support |
items property |
No support | No support | No support | (Yes) | 50.0 (50) | No support | No support | No support | No support |
[1] Partial support refers to not supporting DataTransfer.setDragImage() [CanIUse.com].
[2] Does not support DataTransfer.items property.
[3] As of Firefox 52, the DataTransfer.types property returns a frozen array of DOMStrings as per spec, rather than a DOMStringList.