DataTransfer: getData() 方法
DataTransfer.getData() 方法检索指定类型（作为字符串）的拖动数据。如果拖动操作不包含数据，则此方法返回一个空字符串。
例如，数据类型包括 text/plain 和 text/uri-list。
语法
js
getData(format)
参数
格式（format）-
一个字符串，表示要检索的数据类型。
返回值
一个字符串，表示指定 format 的拖动数据。如果拖动操作没有数据，或者对于指定的 format 没有数据，则此方法返回一个空字符串。
请注意，DataTransfer.getData() 可能不会返回预期值，因为它只允许读取和写入指定事件的数据。在 dragstart 和 drop 事件期间，可以安全地访问数据。对于所有其他事件，数据应被视为不可用。尽管如此，仍然可以枚举项目及其格式。
示例
此示例演示了 DataTransfer 对象的 getData() 和 setData() 方法的用法。
HTML
html
<div id="div1">
<span id="drag" draggable="true">drag me to the other box</span>
</div>
<div id="div2"></div>
CSS
css
#div1,
#div2 {
width: 100px;
height: 50px;
padding: 10px;
border: 1px solid #aaaaaa;
}
JavaScript
js
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const dragElement = document.getElementById("drag");
dragElement.addEventListener("dragstart", drag);
div1.addEventListener("dragover", allowDrop);
div2.addEventListener("dragover", allowDrop);
div1.addEventListener("drop", drop);
div2.addEventListener("drop", drop);
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));
dragElement.style.color = "black";
}
结果
规范
| 规范 |
|---|
| HTML # dom-datatransfer-getdata-dev |
浏览器兼容性
加载中…