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 |
瀏覽器相容性
載入中…