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
dataTransfer.getData(format);
Arguments
format-
A
DOMStringrepresenting the type of data to retrieve.
Return value
DOMString-
A
DOMStringrepresenting 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 |
|---|
| HTML Standard (HTML) # dom-datatransfer-getdata-dev |
Browser compatibility
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
getData |
3 |
12 |
3.5 |
8 |
≤12.1 |
≤4 |
≤37 |
18 |
4 |
≤12.1 |
≤3 |
1.0 |
See also
- Drag and drop
- Drag Operations
- Recommended Drag Types
- Dragging and Dropping Multiple Items
- DataTransfer test - Paste or Drag
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/getData