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
类型
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
类型
list is not changed when replacing data of the same type.
Example data types are
text/plain
and
text/uri-list
.
void dataTransfer.setData(format, data);
DOMString
representing the type of the drag data to add to the
drag object
.
DOMString
representing the data to add to the
drag object
.
This example shows the use of the
DataTransfer
对象的
getData()
,
setData()
and
clearData()
方法。
<!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>
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of 'setData()' in that specification. |
实时标准 | |
|
HTML 5.1
The definition of 'setData()' in that specification. |
推荐 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
setData
|
Chrome 3 | Edge 12 | Firefox 10 | IE No | Opera 12 | Safari 5 | WebView Android ≤37 | Chrome Android 18 | Firefox Android 10 | Opera Android 12 | Safari iOS 5 | Samsung Internet Android 1.0 |
完整支持
不支持
DataTransfer