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 Standard The definition of 'getData()' in that specification. |
Living Standard | |
HTML 5.1 The 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.
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