HTML Drag and Drop API

HTML-Drag-and-Drop verwendet das DOM-Ereignismodell und Ziehen-Ereignisse , die von Mausereignissen geerbt werden. Eine typische Ziehoperation beginnt, wenn ein Benutzer ein ziehbares Element auswählt, fortgesetzt, wenn der Benutzer das Element zu einem abwerfbaren Element zieht, und endet, wenn der Benutzer das gezogene Element freigibt.

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

Jeder Ziehen-Ereignistyp hat einen zugehörigen Ereignis-Handler:

Dieser Abschnitt ist eine Zusammenfassung der grundlegenden Schritte, um einer Anwendung Drag-and-Drop-Funktionalität hinzuzufügen.

Identifizieren, was ziehbar ist

Damit ein Element ziehbar wird, muss das Attribut draggable hinzugefügt und der dragstart Ereignishandler definiert 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>

Für weitere Informationen siehe:

• Draggable-Attribut-Referenz
• Leitfaden zu Ziehoperationen

Daten des Zugs definieren

Die Anwendung kann beliebig viele Datenobjekte in einer Ziehoperation einbeziehen. Jedes Datenobjekt ist eine Zeichenfolge eines bestimmten type — typischerweise ein MIME-Typ wie text/html.

Jedes DragEvent hat eine dataTransfer-Eigenschaft, die die Daten des Ereignisses enthält. Diese Eigenschaft (ein DataTransfer-Objekt) hat auch Methoden zur Verwaltung von Ziehdaten. Die Methode setData() wird verwendet, um ein Element 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 gängigen Datentypen, die im Drag-and-Drop verwendet werden (wie Text, HTML, Links und Dateien), siehe Empfohlene Ziehtypen.
• Für weitere Informationen über Ziehdaten siehe Ziehdaten.

Zugbild definieren

Standardmäßig liefert der Browser ein Bild, das neben dem Zeiger während einer Ziehoperation 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 Bilder für Zugsfeedback in:

• Festlegen des Zug-Feedback-Bilds

Abwurfeffekt definieren

Die Eigenschaft dropEffect wird verwendet, um die Rückmeldung zu steuern, die dem Benutzer während einer Drag-and-Drop-Operation gegeben wird. Sie beeinflusst typischerweise, welchen Cursor der Browser während des Ziehens anzeigt. Beispielsweise kann, wenn der Benutzer über ein Abwurfziel schwebt, der Cursor des Browsers angeben, welche Art von Operation stattfinden wird.

Drei Effekte können definiert werden:

1. copy zeigt an, dass die gezogenen Daten von ihrem aktuellen Standort an den Abwurfstandort kopiert werden.
2. move zeigt an, dass die gezogenen Daten von ihrem aktuellen Standort an den Abwurfstandort verschoben werden.
3. link zeigt an, dass eine Art von Beziehung oder Verbindung zwischen dem Quellort und dem Abwurfstandort hergestellt wird.

Während der Ziehoperation können die Zieh-Effekte so modifiziert werden, dass angezeigt wird, dass bestimmte Effekte an bestimmten Standorten erlaubt sind.

Das folgende Beispiel zeigt, wie diese Eigenschaft verwendet wird.

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

Für weitere Details siehe:

• Zieh-Effekte

Abwurfzone definieren

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

Das folgende Beispiel zeigt, wie diese Attribute verwendet werden, und enthält grundlegende Ereignishandler 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 die zusätzliche Ereignisverarbeitung für dieses Ereignis zu verhindern (wie Touch-Ereignisse oder Zeigerereignisse).

Für weitere Informationen siehe:

• Spezifizieren von Abwurfzielen

Abwurf-Effekt behandeln

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

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

Das folgende Beispiel zeigt einen Abwurf-Handler, der die id des Quellements aus den Ziehdaten erhält und dann die id verwendet, um das Quellement zum Abwurfelement 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>

Für weitere Informationen siehe:

• Ausführen eines Abwurfs

Ende der Ziehoperation

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

Dieses Ereignis wird unabhängig davon ausgelöst, ob das Ziehen abgeschlossen wurde 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 Verarbeitung des Endes einer Ziehoperation siehe:

• Beenden 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 z. B. den Typ des Ziehens (wie copy oder move), die Daten des Zugs (eines oder mehrere Elemente) und den MIME-Typ jedes Ziehelements. DataTransfer-Objekte haben auch Methoden, um Elemente zu den Daten des Zugs 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 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 außerdem Methoden, um die Daten des Ziehelements zu erhalten.

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

Ein wesentlicher Unterschied zwischen den DataTransfer- und DataTransferItem-Schnittstellen besteht darin, dass die erstgenannte die synchrone getData()-Methode verwendet, um auf Daten eines Ziehelements zuzugreifen, während 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/ (Hier bearbeiten)

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