DataTransferItemList
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2016.
Đối tượng DataTransferItemList là danh sách các đối tượng DataTransferItem đại diện cho các mục đang được kéo. Trong thao tác kéo, mỗi DragEvent có thuộc tính dataTransfer và thuộc tính đó là một DataTransferItemList.
Các mục riêng lẻ có thể được truy cập bằng ký hiệu ngoặc [].
DataTransferItemList được thiết kế chủ yếu cho API Kéo và Thả HTML và vẫn được quy định trong phần kéo và thả HTML, nhưng hiện nay cũng được sử dụng bởi các API khác như ClipboardEvent.clipboardData và InputEvent.dataTransfer. Tài liệu về DataTransferItemList chủ yếu thảo luận về cách sử dụng trong các thao tác kéo và thả, bạn nên tham khảo tài liệu API khác để biết cách sử dụng DataTransferItemList trong các ngữ cảnh đó.
Giao diện này không có hàm khởi tạo.
Thuộc tính phiên bản
DataTransferItemList.lengthRead only-
Một
unsigned longlà số lượng mục kéo trong danh sách.
Phương thức phiên bản
DataTransferItemList.add()-
Thêm một mục (đối tượng
Filehoặc chuỗi) vào danh sách mục kéo và trả về đối tượngDataTransferItemcho mục mới. DataTransferItemList.remove()-
Xóa mục kéo khỏi danh sách tại chỉ số đã cho.
DataTransferItemList.clear()-
Xóa tất cả các mục kéo khỏi danh sách.
Ví dụ
Ví dụ này cho thấy cách sử dụng kéo và thả.
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
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
JavaScript
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;
// 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 ev.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";
});
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| HTML # the-datatransferitemlist-interface |