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
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 |
---|
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