DataTransfer.getData()

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

DOMString 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 specified format. If the drag operation has no data or the operation has no data for the specified format, this method returns an empty string.

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

  
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 (Yes) 3.5 [1] 10 (10) 12 3.1
  
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) 10.0 (10)[1] No support 10 No support No support

[1] Before Firefox 48, this method always returned an empty list if the MIME type was not in a white list.

See also

Document Tags and Contributors

 Last updated by: bunnybooboo,