HTML Drag and Drop API

HTML Drag-and-Drop verwendet das DOM-Ereignismodell und Zieh-Ereignisse, die von Mausereignissen geerbt werden. Ein typischer Ziehvorgang beginnt, wenn ein Benutzer ein ziehbares Element auswählt, weitergeht, wenn der Benutzer das Element zu einem ablegbaren Element zieht, und endet, wenn der Benutzer das gezogene Element freigibt.

Während Ziehvorgängen werden mehrere Ereignistypen ausgelöst, und einige Ereignisse können viele Male auftreten, wie z. B. die drag und dragover Ereignisse.

Jeder Typ eines Zieh-Ereignisses hat einen zugeordneten Ereignis-Handler:

Dieser Abschnitt ist eine Zusammenfassung der grundlegenden Schritte zur Hinzufügung von Drag-and-Drop-Funktionalität zu einer Anwendung.

Ermitteln, was ziehbar ist

Um ein Element ziehbar zu machen, muss das draggable Attribut und der dragstart Ereignis-Handler hinzugefügt werden, wie im folgenden Codebeispiel gezeigt:

<script>
  function dragstartHandler(ev) {
    // Add the target element's id to the data transfer object
    ev.dataTransfer.setData("text/plain", ev.target.id);
  }

  window.addEventListener("DOMContentLoaded", () => {
    // Get the element by id
    const element = document.getElementById("p1");
    // Add the ondragstart event listener
    element.addEventListener("dragstart", dragstartHandler);
  });
</script>

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

Weitere Informationen finden Sie unter:

• Erwähnung des draggable Attributs
• Leitfaden zu Drag-Operationen

Definieren der Zieht-Daten

Die Anwendung hat die Freiheit, eine beliebige Anzahl von Datenobjekten in einen Ziehvorgang einzufügen. Jedes Datenobjekt ist eine Zeichenkette eines bestimmten Typs - typischerweise ein MIME-Typ wie text/html.

Jedes DragEvent hat eine dataTransfer Eigenschaft, die die Daten des Ereignisses enthält. Diese Eigenschaft (die ein DataTransfer Objekt ist) hat auch Methoden, um die Zieht-Daten zu verwalten. Die setData() Methode wird verwendet, um ein Objekt zu den Zieht-Daten 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,
  );
}

• Eine Liste häufiger Datentypen, die beim Ziehen und Ablegen verwendet werden (wie Text, HTML, Links und Dateien), finden Sie unter Empfohlene Zieht-Typen.
• Weitere Informationen zu Zieht-Daten finden Sie unter Zieht-Daten.

Definieren des Ziehbilder

Standardmäßig liefert der Browser ein Bild, das während eines Ziehvorgangs neben dem Zeiger erscheint. Eine Anwendung kann jedoch ein benutzerdefiniertes Bild mit der setDragImage() Methode 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 Zieht-Feedback-Bilder in:

• Festlegen des Zieh-Feedback-Bildes

Definieren der Ableg-Effekte

Die dropEffect Eigenschaft wird verwendet, um das Feedback zu steuern, das der Benutzer während eines Drag-and-Drop-Vorgangs erhält. Es beeinflusst typischerweise, welchen Cursor der Browser beim Ziehen anzeigt. Wenn der Benutzer z. B. über ein Ablageziel schwebt, kann der Cursor des Browsers den Typ der Operation anzeigen, die ausgeführt wird.

Drei Effekte können definiert werden:

1. copy zeigt an, dass die gezogenen Daten von ihrem aktuellen Standort zum Ablageort kopiert werden.
2. move zeigt an, dass die gezogenen Daten von ihrem aktuellen Standort zum Ablageort verschoben werden.
3. link zeigt an, dass irgendeine Art von Beziehung oder Verbindung zwischen der Quelle und dem Ablageort hergestellt wird.

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

Das folgende Beispiel zeigt, wie diese Eigenschaft verwendet wird.

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

Für weitere Details siehe:

• Zieht-Effekte

Definieren einer Ablagezone

Standardmäßig verhindert der Browser, dass etwas passiert, wenn etwas auf die meisten HTML-Elemente abgeladen wird. Um dieses Verhalten zu ändern, sodass ein Element zu einer Ablagezone oder ablegbar wird, muss das Element sowohl dragover als auch drop Ereignisse abhören.

Das folgende Beispiel zeigt, wie Sie diese Attribute verwenden, und enthält grundlegende Ereignis-Handler für jedes Attribut.

<script>
  function dragoverHandler(ev) {
    ev.preventDefault();
    ev.dataTransfer.dropEffect = "move";
  }
  function dropHandler(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));
  }
</script>

<p id="target" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)">
  Drop Zone
</p>

Beachten Sie, dass jeder Handler preventDefault() aufruft, um zusätzliche Ereignisverarbeitung für dieses Ereignis zu verhindern (wie Touch-Ereignisse oder Zeiger-Ereignisse).

Weitere Informationen finden Sie unter:

• Festlegen von Ablegezielen

Umgang mit dem Ableg-Effekt

Der Handler für das drop Ereignis ist frei, um die Ziehdaten auf eine anwendungsspezifische Weise zu verarbeiten.

Typischerweise verwendet eine Anwendung die getData() Methode, um die Zieht-Elemente abzurufen und sie dann entsprechend zu verarbeiten. Außerdem können sich die Anwendungssemantiken je nach Wert der dropEffect Eigenschaft und/oder dem Zustand der Modifikator-Tasten unterscheiden.

Das folgende Beispiel zeigt einen Ablage-Handler, der die id des Quell-Elements aus den Ziehdaten abruft und dann die id verwendet, um das Quell-Element zum Ablage-Element zu verschieben:

<script>
  function dragstartHandler(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";
  }
  function dragoverHandler(ev) {
    ev.preventDefault();
    ev.dataTransfer.dropEffect = "move";
  }
  function dropHandler(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));
  }
</script>

<p id="p1" draggable="true" ondragstart="dragstartHandler(event)">
  This element is draggable.
</p>
<div
  id="target"
  ondrop="dropHandler(event)"
  ondragover="dragoverHandler(event)">
  Drop Zone
</div>

Weitere Informationen finden Sie unter:

• Durchführen eines Abwurfs

Zieh-Ende

Am Ende eines Ziehvorgangs wird das dragend Ereignis auf das _Quell-_Element ausgelöst — das Element, das das Ziel des Ziehstarts war.

Dieses Ereignis wird ausgelöst, unabhängig davon, ob das Ziehen abgeschlossen oder abgebrochen wurde. Der dragend Ereignis-Handler kann den Wert der dropEffect Eigenschaft überprüfen, um festzustellen, ob der Ziehvorgang erfolgreich war oder nicht.

Weitere Informationen zum Umgang mit dem Ende eines Ziehvorgangs finden Sie unter:

• Abschluss eines Ziehvorgangs

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 Status des Zieh-Ereignisses, wie den Typ des Ziehens (z. B. copy oder move), die Zieht-Daten (ein oder mehrere Objekte) und den MIME-Typ jedes Zieht-Elements. DataTransfer Objekte haben auch Methoden, um Objekte zu den Zieht-Daten hinzuzufügen oder zu entfernen.

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 Zieht-Element dar, jeder 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 Zieht-Elements abzurufen.

Das DataTransferItemList Objekt ist eine Liste von DataTransferItem Objekten. Das Listenobjekt hat Methoden, um ein Zieht-Element zur Liste hinzuzufügen, ein Zieht-Element aus der Liste zu entfernen und die Liste aller Zieht-Elemente zu löschen.

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

• Kopieren und Verschieben von Elementen mit der DataTransfer Schnittstelle
• Kopieren und Verschieben von Elementen mit der DataTransferListItem Schnittstelle
• Ziehen und Ablegen von Dateien (nur Firefox): https://jsfiddle.net/9C2EF/
• Ziehen und Ablegen von Dateien (Alle Browser): https://jsbin.com/hiqasek/
• Ein Parkprojekt mit der Drag and Drop API: https://park.glitch.me/ (Bearbeiten Sie es hier)

• Zieh-Operationen
• Empfohlene Zieht-Typen
• HTML Living Standard: Drag and Drop
• Drag-and-Drop-Interoperabilitätsdaten von CanIUse