Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
DasDataTransferItemList-Objekt ist eine Liste vonDataTransferItem-Objekten, die Elemente darstellen, die gezogen werden. Während einesDrag-and-Drop-Vorgangs hat jedesDragEvent einedataTransfer-Eigenschaft, und diese Eigenschaft ist eineDataTransferItemList.
Die einzelnen Elemente können mit derKlammernotation[] zugegriffen werden.
DataTransferItemList wurde in erster Linie für dieHTML 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 undInputEvent.dataTransfer. Die Dokumentation vonDataTransferItemList wird hauptsächlich ihre Verwendung in Drag-and-Drop-Operationen diskutieren. Sie sollten jedoch die Dokumentationen der anderen APIs für die Verwendung vonDataTransferItemList in diesen Kontexten konsultieren.
Diese Schnittstelle hat keinen Konstruktor.
Instanz-Eigenschaften
DataTransferItemList.lengthSchreibgeschütztEin
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 draggable="true"> Select this element, drag it to the Drop Zone and then release the selection to move the element. </p></div><div>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 |