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