DataTransferItemList: add() 方法
DataTransferItemList.add() 方法使用指定的資料建立一個新的 DataTransferItem，並將其新增到拖動資料列表中。該項可以是 File 物件或給定型別的字串。如果該項成功新增到列表中，則返回新建立的 DataTransferItem 物件。
語法
js
add(data, type)
add(file)
引數
返回值
包含指定資料的 DataTransferItem。如果無法建立拖動項（例如，如果關聯的 DataTransfer 物件沒有資料儲存），則返回 null。
異常
NotSupportedErrorDOMException-
如果提供了字串
data引數，並且列表中已包含一個kind為"Plain Unicode string"且型別等於指定型別引數的項，則丟擲此異常。
示例
此示例展示了 add() 方法的使用。
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>
CSS
css
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
js
const source = document.getElementById("source");
const target = document.getElementById("target");
source.addEventListener("dragstart", (ev) => {
console.log("dragStart");
// Add this element's id to the drag payload so the drop handler will
// know which element to add to its tree
const dataList = ev.dataTransfer.items;
dataList.add(ev.target.id, "text/plain");
// Add some other items to the drag payload
dataList.add("<p>Paragraph…</p>", "text/html");
dataList.add("http://www.example.org", "text/uri-list");
});
source.addEventListener("dragend", (ev) => {
console.log("dragEnd");
const dataList = ev.dataTransfer.items;
for (let i = 0; i < dataList.length; i++) {
dataList.remove(i);
}
// Clear any remaining drag data
dataList.clear();
});
target.addEventListener("drop", (ev) => {
console.log("Drop");
ev.preventDefault();
// Loop through the dropped items and log their data
for (const item of event.dataTransfer.items) {
if (item.kind === "string" && item.type.match("^text/plain")) {
// This item is the target node
item.getAsString((s) => {
ev.target.appendChild(document.getElementById(s));
});
} else if (item.kind === "string" && item.type.match("^text/html")) {
// Drag data item is HTML
item.getAsString((s) => {
console.log(`… Drop: HTML = ${s}`);
});
} else if (item.kind === "string" && item.type.match("^text/uri-list")) {
// Drag data item is URI
item.getAsString((s) => {
console.log(`… Drop: URI = ${s}`);
});
}
}
});
target.addEventListener("dragover", (ev) => {
console.log("dragOver");
ev.preventDefault();
// Set the dropEffect to move
ev.dataTransfer.dropEffect = "move";
});
結果
規範
| 規範 |
|---|
| HTML # dom-datatransferitemlist-add-dev |
瀏覽器相容性
載入中…