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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅