DataTransfer.setData()
The DataTransfer.setData()
method sets the drag
operation's drag data
to the specified data and type. If
data for the given type does not exist, it is added at the end of the drag data store,
such that the last item in the types
list will be
the new type. If data for the given type already exists, the existing data is replaced
in the same position. That is, the order of the
types
list is not changed when replacing data of the
same type.
Example data types are text/plain
and text/uri-list
.
Syntax
void dataTransfer.setData(format, data);
Arguments
- format
-
A
DOMString
representing the type of the drag data to add to thedrag object
. - data
-
A
DOMString
representing the data to add to thedrag object
.
Return value
None.
Example
This example shows the use of the DataTransfer
object's
getData()
,
setData()
and
clearData()
methods.
<!DOCTYPE html>
<html lang=en>
<title>Examples of DataTransfer's setData(), getData() and clearData()</title>
<meta content="width=device-width">
<style>
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
</style>
<script>
function dragstart_handler(ev) {
console.log("dragStart");
// Change the source element's background color to signify drag has started
ev.currentTarget.style.border = "dashed";
// Set the drag's format and data. Use the event target's id for the data
ev.dataTransfer.setData("text/plain", ev.target.id);
}
function dragover_handler(ev) {
console.log("dragOver");
ev.preventDefault();
}
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
// Get the data, which is the id of the drop target
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
// Clear the drag data cache (for all formats/types)
ev.dataTransfer.clearData();
}
</script>
<body>
<h1>Examples of <code>DataTransfer</code>: <code>setData()</code>, <code>getData()</code>, <code>clearData()</code></h1>
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>
</html>
Specifications
Specification |
---|
HTML Standard # dom-datatransfer-setdata-dev |
Browser compatibility
BCD tables only load in the browser