DataTransfer

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das DataTransfer-Objekt wird verwendet, um Daten zwischen Kontexten zu übertragen, wie beispielsweise bei einem Drag-and-Drop-Vorgang oder beim Lesen/Schreiben der Zwischenablage. Es kann ein oder mehrere Datenelemente halten, wobei jedes Element einen oder mehrere Datentypen haben kann.

DataTransfer wurde ursprünglich für die HTML Drag and Drop API entwickelt, als die Eigenschaft DragEvent.dataTransfer, und ist immer noch im Bereich Drag-and-Drop im HTML-Standard spezifiziert. Es wird jedoch mittlerweile auch von anderen APIs wie ClipboardEvent.clipboardData und InputEvent.dataTransfer verwendet. Andere APIs nutzen jedoch nur bestimmte Teile der Schnittstelle und ignorieren Eigenschaften wie dropEffect. Die Dokumentation von DataTransfer wird sich hauptsächlich mit der Verwendung bei Drag-and-Drop-Vorgängen befassen, und Sie sollten die Dokumentationen der anderen APIs für deren Einsatz von DataTransfer in diesen Kontexten konsultieren.

Konstruktor

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

Instanz-Eigenschaften

DataTransfer.dropEffect: Ruft den Typ des derzeit ausgewählten Drag-and-Drop-Vorgangs ab oder legt den Vorgang auf einen neuen Typ fest. Der Wert muss none, copy, link oder move sein.
DataTransfer.effectAllowed: Gibt alle Arten von möglichen Vorgängen an. Muss einer von none, copy, copyLink, copyMove, link, linkMove, move, all oder uninitialized sein.
DataTransfer.files Schreibgeschützt: Enthält eine Liste aller lokalen Dateien, die beim Datentransfer verfügbar sind. Wenn der Drag-Vorgang nicht das Ziehen von Dateien beinhaltet, ist diese Eigenschaft eine leere Liste.
DataTransfer.items Schreibgeschützt: Gibt ein DataTransferItemList-Objekt zurück, das eine Liste aller Drag-Daten ist.
DataTransfer.types Schreibgeschützt: Ein Array von Strings, das die Formate angibt, die im dragstart-Ereignis festgelegt wurden.

Instanz-Methoden

DataTransfer.addElement() Experimentell Nicht standardisiert: Legt die Drag-Quelle für das angegebene Element fest. Dies wird das Element sein, bei dem die Ereignisse drag und dragend ausgelöst werden und nicht das Standardziel (der Knoten, der gezogen wurde). Firefox-spezifisch.
DataTransfer.clearData(): Entfernt die Daten, die mit einem bestimmten Typ verknüpft sind. Das Argument type ist optional. Wenn der Typ leer oder nicht angegeben ist, werden die Daten aller Typen entfernt. Wenn Daten für den angegebenen Typ nicht existieren oder der Datentransfer keine Daten enthält, hat diese Methode keine Wirkung.
DataTransfer.getData(): Ruft die Daten für einen gegebenen Typ ab oder gibt einen leeren String zurück, wenn keine Daten für diesen Typ existieren oder der Datentransfer keine Daten enthält.
DataTransfer.setData(): Setzt die Daten für einen bestimmten Typ. Wenn für den Typ keine Daten existieren, wird dieser am Ende hinzugefügt, sodass das letzte Element in der Typenliste das neue Format ist. Wenn Daten für den Typ bereits existieren, werden die vorhandenen Daten an derselben Position ersetzt.
DataTransfer.setDragImage(): Setzt das Bild, das zum Ziehen verwendet werden soll, falls ein benutzerdefiniertes gewünscht wird.

Beispiele

Jede Methode und Eigenschaft, die in diesem Dokument aufgeführt ist, hat ihre eigene Referenzseite und jede Referenzseite enthält entweder direkt ein Beispiel der Schnittstelle oder einen Link zu einem Beispiel.

Spezifikationen

Specification
HTML Standard # the-datatransfer-interface

Browser-Kompatibilität

BCD tables only load in the browser