DataTransfer：getData() 方法

DataTransfer.getData() 方法检索拖动数据（作为字符串）的指定类型。如果拖动操作不包含数据，则此方法返回空字符串。

示例数据类型为 text/plain 和 text/uri-list。

语法

js
getData(format)

参数

format

表示要检索的数据类型的字符串。

返回值

表示指定 format 的拖动数据的字符串。如果拖动操作没有数据或操作没有指定 format 的数据，则此方法返回空字符串。

注意事项

数据可用性

HTML 拖放规范 规定了 拖动数据存储模式。这可能会导致意外行为，因为并非所有浏览器都强制执行此限制，DataTransfer.getData() 可能不会返回预期值。

在 dragstart 和 drop 事件期间，可以安全地访问数据。对于所有其他事件，应认为数据不可用。尽管如此，仍然可以枚举项目及其格式。

示例

此示例显示了如何使用 DataTransfer 对象的 getData() 和 setData() 方法。

HTML

html
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <span id="drag" draggable="true" ondragstart="drag(event)"
    >drag me to the other box</span
  >
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

CSS

css
#div1,
#div2 {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

JavaScript

js
function allowDrop(allowdropevent) {
  allowdropevent.target.style.color = "blue";
  allowdropevent.preventDefault();
}

function drag(dragevent) {
  dragevent.dataTransfer.setData("text", dragevent.target.id);
  dragevent.target.style.color = "green";
}

function drop(dropevent) {
  dropevent.preventDefault();
  const data = dropevent.dataTransfer.getData("text");
  dropevent.target.appendChild(document.getElementById(data));
  document.getElementById("drag").style.color = "black";
}

结果

规范

规范
HTML 标准
# dom-datatransfer-getdata-dev

浏览器兼容性

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

另请参阅