The DataTransfer.getData()
method retrieves drag data (as a DOMString
) for the specified type. If the drag operation does not include data, this method returns an empty string.
Example data types are text/plain
and text/uri-list
.
Syntax
dataTransfer.getData(format);
Arguments
format
- A
DOMString
representing the type of data to retrieve.
Return value
DOMString
- A
DOMString
representing the drag data for the specifiedformat
. If the drag operation has no data or the operation has no data for the specifiedformat
, this method returns an empty string.
Caveats
- Data availability
- The HTML5 Drag and Drop Specification dictates a
drag data store mode
. This may result in unexpected behavior, beingDataTransfer.getData()
not returning an expected value.
Example
This example shows the use of the DataTransfer
object's getData()
and setData()
methods.
HTML Content
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
CSS Content
#div1, #div2 {
width:100px;
height:50px;
padding:10px;
border:1px solid #aaaaaa;
}
JavaScript Content
function allowDrop(allowdropevent) {
allowdropevent.target.style.color = 'blue';
allowdropevent.preventDefault();
}
function drag(dragevent) {
dragevent.dataTransfer.setData("text", dragevent.target.id);
dragevent.target.style.color = 'green';
}
function drop(dropevent) {
dropevent.preventDefault();
var data = dropevent.dataTransfer.getData("text");
dropevent.target.appendChild(document.getElementById(data));
document.getElementById("drag").style.color = 'black';
}
Result
Specifications
Specification | Status | Comment |
HTML Living StandardThe definition of 'getData()' in that specification. | Living Standard | |
HTML 5.1The definition of 'getData()' in that specification. | Recommendation | Initial definition |
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
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 |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
See also
- Drag and drop
- Drag Operations
- Recommended Drag Types
- Dragging and Dropping Multiple Items
- DataTransfer test - Paste or Drag
DataTransfer.getData() by Mozilla Contributors is licensed under CC-BY-SA 2.5.