DataTransfer

Konstruktor

DataTransfer()

Erstellt und gibt ein neues DataTransfer-Objekt zurück.

Instanzeigenschaften

DataTransfer.dropEffect

Ruft die Art der aktuell ausgewählten Drag-and-Drop-Operation ab oder setzt die Operation auf einen neuen Typ. Der Wert muss none, copy, link oder move sein.

DataTransfer.effectAllowed

Gibt alle Typen von möglichen Operationen an. Muss einer der folgenden sein: none, copy, copyLink, copyMove, link, linkMove, move, all oder uninitialized.

DataTransfer.files Schreibgeschützt

Beinhaltet eine Liste aller lokalen Dateien, die beim Datentransfer verfügbar sind. Wenn die Drag-Operation das Draggen von Dateien nicht umfasst, ist diese Eigenschaft eine leere Liste.

DataTransfer.items Schreibgeschützt

Gibt ein DataTransferItemList-Objekt zurück, welches eine Liste aller Drag-Daten ist.

DataTransfer.types Schreibgeschützt

Ein Array von Strings, welches die Formate bereitstellt, die im dragstart-Ereignis festgelegt wurden.

Instanzmethoden

DataTransfer.addElement() Experimentell Nicht standardisiert

Setzt die Drag-Quelle für das angegebene Element. Dies wird das Element sein, auf dem die drag- und dragend-Ereignisse ausgelöst werden und nicht das Standardziel (der Knoten, der gezogen wurde). Spezifisch für Firefox.

DataTransfer.clearData()

Entfernt die Daten, die mit einem gegebenen Typ verbunden sind. Das Typ-Argument ist optional. Ist der Typ leer oder nicht angegeben, werden die Daten aller Typen entfernt. Existieren keine Daten für den angegebenen Typ oder enthält der Datentransfer keine Daten, hat diese Methode keinen Effekt.

DataTransfer.getData()

Ruft die Daten für einen gegebenen Typ ab oder einen leeren String, wenn keine Daten für diesen Typ existieren oder der Datentransfer keine Daten enthält.

DataTransfer.setData()

Setzt die Daten für einen gegebenen Typ. Existieren keine Daten für diesen Typ, werden sie am Ende hinzugefügt, sodass das letzte Element in der Typenliste das neue Format sein wird. Existieren bereits Daten für diesen Typ, werden die existierenden Daten an derselben Position ersetzt.

DataTransfer.setDragImage()

Setzt das Bild, das beim Draggen verwendet werden soll, wenn ein benutzerdefiniertes gewünscht ist.

Beispiele

Jede in diesem Dokument aufgeführte Methode und Eigenschaft hat eine eigene Referenzseite, und jede Referenzseite enthält entweder direkt ein Beispiel für die Schnittstelle oder einen Link zu einem Beispiel.

Lesen der Daten in einem Einfüge- oder Drop-Ereignis

Im folgenden Beispiel haben wir ein <form>, das drei verschiedene Arten von Texteingaben enthält: ein Text-<input>-Element, ein <textarea>-Element und ein <div>-Element mit contenteditable auf true gesetzt. Der Benutzer kann Text in eines dieser Elemente einfügen oder fallen lassen, und die Daten im ClipboardEvent.clipboardData- oder DragEvent.dataTransfer-Objekt werden angezeigt.

HTML

<form> <fieldset> <legend>&lt;input /></legend> <input type="text" /> <table class="center"> <tr> <th scope="row">Operation type</th> <td></td> </tr> <tr> <th scope="row">Content type</th> <td></td> </tr> </table> </fieldset> <fieldset> <legend>&lt;textarea /></legend> <textarea></textarea> <table class="center"> <tr> <th scope="row">Operation type</th> <td></td> </tr> <tr> <th scope="row">Content type</th> <td></td> </tr> </table> </fieldset> <fieldset> <legend>&lt;div contenteditable /></legend> <div contenteditable></div> <table class="center"> <tr> <th scope="row">Operation type</th> <td></td> </tr> <tr> <th scope="row">Content type</th> <td></td> </tr> </table> </fieldset> <p class="center"> <input type="reset" /> </p> </form> 

CSS

.center { text-align: center; } form > fieldset > * { vertical-align: top; } form input, form textarea, form [contenteditable] { min-width: 15rem; padding: 0.25rem; } [contenteditable] { appearance: textfield; display: inline-block; min-height: 1rem; border: 1px solid; } form table { display: inline-table; } table ol { text-align: left; } 

JavaScript

const form = document.querySelector("form"); function displayData(event) { if (event.type === "drop") event.preventDefault(); const cells = event.target.nextElementSibling.querySelectorAll("td"); cells[0].textContent = event.type; const transfer = event.clipboardData || event.dataTransfer; const ol = document.createElement("ol"); cells[1].textContent = ""; cells[1].appendChild(ol); for (const item of transfer.items) { const li = document.createElement("li"); li.textContent = `${item.kind} ${item.type}`; ol.appendChild(li); } } form.addEventListener("paste", displayData); form.addEventListener("drop", displayData); form.addEventListener("reset", () => { for (const cell of form.querySelectorAll("[contenteditable], td")) { cell.textContent = ""; } }); 

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Drag and Drop
• Drag-Operationen
• Arbeiten mit dem Drag-Datenspeicher