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.
Das DataTransferItemList-Objekt ist eine Liste von DataTransferItem-Objekten, die Elemente darstellen, die gezogen werden. Während eines Drag-and-Drop-Vorgangs hat jedes DragEvent eine dataTransfer-Eigenschaft, und diese Eigenschaft ist eine DataTransferItemList.
Die einzelnen Elemente können mit der Klammernotation [] zugegriffen werden.
DataTransferItemList wurde in erster Linie für die HTML Drag and Drop API entwickelt und ist immer noch im HTML-Drag-and-Drop-Abschnitt spezifiziert. Es wird jedoch jetzt auch von anderen APIs verwendet, wie z. B. ClipboardEvent.clipboardData und InputEvent.dataTransfer. Die Dokumentation von DataTransferItemList wird hauptsächlich ihre Verwendung in Drag-and-Drop-Operationen diskutieren. Sie sollten jedoch die Dokumentationen der anderen APIs für die Verwendung von DataTransferItemList in diesen Kontexten konsultieren.
Diese Schnittstelle hat keinen Konstruktor.
Instanz-Eigenschaften
DataTransferItemList.lengthSchreibgeschützt-
Ein
unsigned long, der die Anzahl der Drag-Elemente in der Liste darstellt.
Instanz-Methoden
DataTransferItemList.add()-
Fügt der Drag-Element-Liste ein Element (entweder ein
File-Objekt oder einen String) hinzu und gibt einDataTransferItem-Objekt für das neue Element zurück. DataTransferItemList.remove()-
Entfernt das Drag-Element aus der Liste an dem angegebenen Index.
DataTransferItemList.clear()-
Entfernt alle Drag-Elemente aus der Liste.
Beispiel
Dieses Beispiel zeigt, wie Drag and Drop verwendet wird.
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";
});
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # the-datatransferitemlist-interface |
Browser-Kompatibilität
Loading…