The DataTransfer.getData()
method retrieves drag data (as a string) 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
.
The DataTransfer.getData()
method retrieves drag data (as a string) 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
.
js
getData(format)
format
A string representing the type of data to retrieve.
A string 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.
The HTML Drag and Drop Specification dictates a drag data store mode
. This may result in unexpected behavior, being DataTransfer.getData()
not returning an expected value, because not all browsers enforce this restriction.
During the dragstart
and drop
events, it is safe to access the data. For all other events, the data should be considered unavailable. Despite this, the items and their formats can still be enumerated.
This example shows the use of the DataTransfer
object's getData()
and setData()
methods.
html
<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
#div1, #div2 { width: 100px; height: 50px; padding: 10px; border: 1px solid #aaaaaa; }
js
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(); const data = dropevent.dataTransfer.getData("text"); dropevent.target.appendChild(document.getElementById(data)); document.getElementById("drag").style.color = "black"; }
Specification |
---|
HTML Standard # dom-datatransfer-getdata-dev |
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.2 | 1.0 |
© 2005–2023 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