此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
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">
选中该元素并将其拖动到可放置区域,然后释放选择以移动该元素。
</p>
</div>
<div id="target">可放置区域</div>
<button id="reset">重置示例</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");
// 更改源元素的背景颜色来表示已开始拖动
ev.currentTarget.classList.add("dragging");
// 清除拖动数据缓存(对于所有格式/类型)
ev.dataTransfer.clearData();
// 设置拖动的数据格式和数据
// 使用事件目标的 id 作为数据
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();
// 获取数据,即源元素的 id
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 |
浏览器兼容性
启用 JavaScript 以查看此浏览器兼容性表。