{{APIRef("HTML DOM")}}
The DataTransfer.getData()
method retrieves drag data (as a {{domxref("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 {{domxref("DOMString")}} representing the type of data to retrieve.
Return value
- {{domxref("DOMString")}}
- A {{domxref("DOMString")}} representing the drag data for the specified
format
. If the drag operation has no data or the operation has no data for the specifiedformat
, this method returns an empty string.
Example
This example shows the use of the {{domxref("DataTransfer")}} object's {{domxref("DataTransfer.getData()","getData()")}} and {{domxref("DataTransfer.setData()","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
{{ EmbedLiveSample('Example', 600, '', '', 'Web/API/DataTransfer/getData') }}
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-getdata", "getData()")}} | {{Spec2("HTML WHATWG")}} | |
{{SpecName("HTML5.1", "editing.html#dom-datatransfer-getdata", "getData()")}} | {{Spec2("HTML5.1")}} | Initial definition |
Browser compatibility
{{CompatibilityTable}}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | 4 | 3.5 [1] | {{CompatGeckoDesktop(10)}} | 12 | 3.1 |
Feature | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | {{CompatNo}} | {{CompatNo}} | {{CompatNo}} | {{CompatGeckoMobile(10)}}[1] | {{CompatNo}} | {{CompatIE("10")}} | {{CompatNo}} | {{CompatNo}} |
[1] Before Firefox 48, this method always returned an empty list if the MIME type was not in a white list.
See also
{{page("/en-US/docs/Web/API/DataTransfer", "See also")}}