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
void
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 | Status | Comment |
HTML Living StandardThe definition of 'setData()' in that specification. | Living Standard | |
HTML 5.1The definition of 'setData()' in that specification. | Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
setData
|
Chrome
Full support 3 |
Edge
Full support 12 |
Firefox
Full support 10 |
IE
No support No |
Opera
Full support 12 |
Safari
Full support 5 |
WebView Android
Full support ≤37 |
Chrome Android
Full support 18 |
Firefox Android
Full support 10 |
Opera Android
Full support 12 |
Safari iOS
Full support 5 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
- No support
- No support
See also
- Drag and drop
- Drag Operations
- Recommended Drag Types
- Dragging and Dropping Multiple Items
- DataTransfer test - Paste or Drag
DataTransfer.setData() by Mozilla Contributors is licensed under CC-BY-SA 2.5.