DataTransfer: setData() 方法
DataTransfer.setData() 方法会将拖动操作的拖动数据设置为指定的数据和类型。如果给定类型的数据不存在，则会将其添加到拖动数据存储的末尾，这样 types 列表的最后一个元素将是新类型。如果给定类型的数据已存在，则会用新数据替换同一位置的旧数据。也就是说，当替换同一类型的数据时，types 列表的顺序不会改变。
示例数据类型包括 text/plain 和 text/uri-list。
语法
js
setData(format, data)
参数
格式（format）-
一个表示要添加到
DataTransfer的拖动数据类型的字符串。 data-
一个表示要添加到
DataTransfer的数据的字符串。
返回值
无（undefined）。
示例
拖动元素
在此示例中，我们可以将一个 <p> 元素拖动到一个目标 <div> 元素中。
-
在
dragstart处理程序中，我们使用setData()将<p>元素的id添加到DataTransfer对象中。 -
在
drop处理程序中，我们检索id并使用它将<p>元素移动到目标中。
HTML
html
<div>
<p id="source" 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">Drop Zone</div>
<button id="reset">Reset example</button>
CSS
css
div {
margin: 0.5em 0;
padding: 2em;
}
#target,
#source {
border: 1px solid black;
padding: 0.5rem;
}
.dragging {
background-color: pink;
}
JavaScript
js
const source = document.querySelector("#source");
source.addEventListener("dragstart", (ev) => {
console.log("dragStart");
// Change the source element's background color
// to show that drag has started
ev.currentTarget.classList.add("dragging");
// Clear the drag data cache (for all formats/types)
ev.dataTransfer.clearData();
// Set the drag's format and data.
// Use the event target's id for the data
ev.dataTransfer.setData("text/plain", ev.target.id);
});
source.addEventListener("dragend", (ev) =>
ev.target.classList.remove("dragging"),
);
const target = document.querySelector("#target");
target.addEventListener("dragover", (ev) => {
console.log("dragOver");
ev.preventDefault();
});
target.addEventListener("drop", (ev) => {
console.log("Drop");
ev.preventDefault();
// Get the data, which is the id of the source element
const data = ev.dataTransfer.getData("text");
const source = document.getElementById(data);
ev.target.appendChild(source);
});
const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());
结果
规范
| 规范 |
|---|
| HTML # dom-datatransfer-setdata-dev |
浏览器兼容性
加载中…