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
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, because not all browsers enforce this restriction.During the
dragstart
anddrop
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.
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 # dom-datatransfer-getdata-dev |
Browser compatibility
BCD tables only load in the browser