HTML Drag and Drop API

HTML Drag-and-Drop verwendet das DOM-Ereignismodell und Ziehereignisse, die von Mausereignissen erben. Eine typische Ziehoperation beginnt, wenn ein Benutzer ein ziehbares Element auswählt, fortgesetzt wird, wenn der Benutzer das Element zu einem fallbaren Element zieht, und endet, wenn der Benutzer das gezogene Element loslässt.

Während Ziehoperationen werden mehrere Ereignistypen ausgelöst, und einige Ereignisse könnten viele Male ausgelöst werden, wie die drag- und dragover-Ereignisse.

Jeder Ziehereignistyp hat einen zugeordneten Ereignishandler:

Dieser Abschnitt fasst die grundlegenden Schritte zusammen, um Drag-and-Drop-Funktionalität zu einer Anwendung hinzuzufügen.

Bestimmen, was ziehbar ist

Ein Element ziehbar zu machen, erfordert das Hinzufügen des draggable-Attributs und des dragstart-Ereignishandlers, wie im folgenden Codebeispiel gezeigt:

<p id="p1" draggable="true">This element is draggable.</p> 

// Get the element by id const element = document.getElementById("p1"); // Add the ondragstart event listener element.addEventListener("dragstart", (ev) => { // Add the target element's id to the data transfer object ev.dataTransfer.setData("text/plain", ev.target.id); }); 

Für weitere Informationen siehe:

• Draggable-Attribut-Referenz
• Leitfaden zu Ziehoperationen

Definition der Daten des Zugs

Die Anwendung ist frei, eine beliebige Anzahl von Datenobjekten in einer Ziehoperation einzubeziehen. Jedes Datenobjekt ist eine Zeichenkette eines bestimmten typs — typischerweise ein MIME-Typ wie text/html.

Jedes DragEvent verfügt über eine dataTransfer-Eigenschaft, die die Daten des Ereignisses enthält. Diese Eigenschaft (die ein DataTransfer-Objekt ist) hat auch Methoden, um die Ziehdaten zu verwalten. Die Methode setData() wird verwendet, um ein Objekt zu den Ziehdaten hinzuzufügen, wie im folgenden Beispiel gezeigt.

function dragstartHandler(ev) { // Add different types of drag data ev.dataTransfer.setData("text/plain", ev.target.innerText); ev.dataTransfer.setData("text/html", ev.target.outerHTML); ev.dataTransfer.setData( "text/uri-list", ev.target.ownerDocument.location.href, ); } 

• Für eine Liste der in Drag-and-Drop häufig verwendeten Datentypen (wie Text, HTML, Links und Dateien) siehe Empfohlene Ziehtypen.
• Für weitere Informationen zu Ziehdaten siehe Ziehdaten.

Definition des Ziehbildes

Standardmäßig liefert der Browser ein Bild, das während einer Ziehoperation neben dem Zeiger erscheint. Eine Anwendung kann jedoch ein benutzerdefiniertes Bild mit der Methode setDragImage() definieren, wie im folgenden Beispiel gezeigt.

// Create an image and then use it for the drag image. // NOTE: change "example.gif" to a real image URL or the image // will not be created and the default drag image will be used. let img = new Image(); img.src = "example.gif"; function dragstartHandler(ev) { ev.dataTransfer.setDragImage(img, 10, 10); } 

Erfahren Sie mehr über Zieh-Feedback-Bilder in:

• Festlegen des Zieh-Feedback-Bildes

Definition des Drop-Effekts

Die Eigenschaft dropEffect wird verwendet, um das Feedback zu steuern, das der Benutzer während einer Drag-and-Drop-Operation erhält. Es betrifft typischerweise, welchen Cursor der Browser während des Ziehens anzeigt. Zum Beispiel kann der Cursor des Browsers, wenn der Benutzer über ein Drop-Ziel schwebt, den Typ der Operation anzeigen, die stattfinden wird.

Es können drei Effekte definiert werden:

1. copy zeigt an, dass die gezogenen Daten von ihrem aktuellen Standort zum Drop-Standort kopiert werden.
2. move zeigt an, dass die gezogenen Daten von ihrem aktuellen Standort zum Drop-Standort verschoben werden.
3. link zeigt an, dass eine Art von Beziehung oder Verbindung zwischen den Quell- und Zielorten erstellt wird.

Während der Ziehoperation können Zieheffekte modifiziert werden, um anzuzeigen, dass bestimmte Effekte an bestimmten Orten erlaubt sind.

Das folgende Beispiel zeigt, wie Sie diese Eigenschaft verwenden.

function dragstartHandler(ev) { ev.dataTransfer.dropEffect = "copy"; } 

Für weitere Details siehe:

• Zieheffekte

Definition einer Drop-Zone

Standardmäßig verhindert der Browser, dass etwas passiert, wenn etwas in die meisten HTML-Elemente gezogen wird. Um dieses Verhalten zu ändern, sodass ein Element zu einer Drop-Zone wird oder fallbar ist, muss das Element sowohl auf dragover- als auch auf drop-Ereignisse hören.

Das folgende Beispiel zeigt, wie Sie diese Ereignisse verwenden.

<p id="target">Drop Zone</p> 

const target = document.getElementById("target"); target.addEventListener("dragover", (ev) => { ev.preventDefault(); ev.dataTransfer.dropEffect = "move"; }); target.addEventListener("drop", (ev) => { ev.preventDefault(); // Get the id of the target and add the moved element to the target's DOM const data = ev.dataTransfer.getData("text/plain"); ev.target.appendChild(document.getElementById(data)); }); 

Beachten Sie, dass jeder Handler preventDefault() aufruft, um eine zusätzliche Ereignisverarbeitung für dieses Ereignis zu verhindern (z.B. Touchevents oder Zeigerevents).

Für weitere Informationen siehe:

• Angeben von Zielzonen

Verarbeiten des Drop-Effekts

Der Handler für das drop-Ereignis kann die Ziehdaten auf eine anwendungsspezifische Weise verarbeiten.

Typischerweise verwendet eine Anwendung die Methode getData(), um Ziehelemente abzurufen und dann entsprechend zu verarbeiten. Zusätzlich können sich die Semantiken einer Anwendung je nach Wert des dropEffect und/oder dem Zustand der Modifikatortasten unterscheiden.

Das folgende Beispiel zeigt einen Drop-Handler, der die id des Quellements aus den Ziehdaten erhält und dann die id verwendet, um das Quellement zum Drop-Element zu bewegen:

<p id="p1" draggable="true">This element is draggable.</p> <div id="target">Drop Zone</div> 

const source = document.getElementById("p1"); const target = document.getElementById("target"); source.addEventListener("dragstart", (ev) => { // Add the target element's id to the data transfer object ev.dataTransfer.setData("application/my-app", ev.target.id); ev.dataTransfer.effectAllowed = "move"; }); target.addEventListener("dragover", (ev) => { ev.preventDefault(); ev.dataTransfer.dropEffect = "move"; }); target.addEventListener("drop", (ev) => { ev.preventDefault(); // Get the id of the target and add the moved element to the target's DOM const data = ev.dataTransfer.getData("application/my-app"); ev.target.appendChild(document.getElementById(data)); }); 

Für weitere Informationen siehe:

• Durchführen eines Drops

Ziehende

Am Ende einer Ziehoperation löst das dragend-Ereignis am Quell-Element aus — dem Element, das das Ziel des Ziehstarts war.

Dieses Ereignis löst unabhängig davon aus, ob das Ziehen abgeschlossen oder abgebrochen wurde. Der dragend-Ereignishandler kann den Wert der dropEffect-Eigenschaft überprüfen, um festzustellen, ob die Ziehoperation erfolgreich war oder nicht.

Für weitere Informationen zur Behandlung des Endes einer Ziehoperation siehe:

• Beenden eines Zugs

Die HTML Drag and Drop-Schnittstellen sind DragEvent, DataTransfer, DataTransferItem und DataTransferItemList.

Die DragEvent-Schnittstelle hat einen Konstruktor und eine dataTransfer-Eigenschaft, die ein DataTransfer-Objekt ist.

DataTransfer-Objekte enthalten den Zustand des Ziehereignisses, wie die Art des Zugs, der durchgeführt wird (z. B. Kopie oder verschieben), die Daten des Zugs (ein oder mehrere Elemente) und den MIME-Typ jedes Ziehelements. DataTransfer-Objekte haben auch Methoden zum Hinzufügen oder Entfernen von Elementen zu den Daten des Zugs.

Die DragEvent- und DataTransfer-Schnittstellen sollten die einzigen sein, die benötigt werden, um HTML Drag and Drop-Fähigkeiten zu einer Anwendung hinzuzufügen.

Jedes DataTransfer-Objekt enthält eine items-Eigenschaft, die eine Liste von DataTransferItem-Objekten ist. Ein DataTransferItem-Objekt stellt ein einzelnes Ziehelement dar, jedes mit einer kind-Eigenschaft (entweder string oder file) und einer type-Eigenschaft für den MIME-Typ des Datenobjekts. Das DataTransferItem-Objekt hat auch Methoden, um die Daten des Ziehelements abzurufen.

Das DataTransferItemList-Objekt ist eine Liste von DataTransferItem-Objekten. Das Listenobjekt hat Methoden, um ein Ziehelement zur Liste hinzuzufügen, ein Ziehelement von der Liste zu entfernen und die Liste aller Ziehelemente zu leeren.

Ein wesentlicher Unterschied zwischen den DataTransfer- und DataTransferItem-Schnittstellen besteht darin, dass erstere die synchrone Methode getData() verwendet, um auf die Daten eines Ziehelements zuzugreifen, während letztere stattdessen die asynchrone Methode getAsString() verwendet.

• Kopieren und Verschieben von Elementen mit der DataTransfer-Schnittstelle
• Kopieren und Verschieben von Elementen mit der DataTransferItemList-Schnittstelle
• Ziehen und Ablegen von Dateien (nur Firefox): https://jsfiddle.net/9C2EF/
• Ziehen und Ablegen von Dateien (alle Browser): https://jsbin.com/hiqasek/

• Ziehoperationen
• Empfohlene Ziehtypen
• HTML Living Standard: Drag and Drop
• Drag and Drop Interoperabilitätsdaten von CanIUse