HTML-Drag-and-Drop verwendet die DOM event modelund drag eventsgeerbt von mouse events. Eine typische Ziehoperation beginnt, wenn ein Benutzer ein ziehbares Element auswählt , das Element auf ein ziehbares Element zieht und dann das gezogene Element loslässt.

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

Jeder Drag-Event-Typ hat einen zugeordneten Event-Handler:

Die HTML Drag & Drop-Schnittstellen sind DragEvent, DataTransferund .DataTransferItemDataTransferItemList

Die DragEventSchnittstelle hat einen Konstruktor und eine dataTransferEigenschaft, die ein DataTransferObjekt ist.

DataTransferObjekte umfassen den Zustand des Ziehereignisses, wie z. B. die Art des Ziehvorgangs (wie copyoder move), die Daten des Ziehvorgangs (ein oder mehrere Elemente) und den MIME-Typ jedes Ziehelements . DataTransferObjekte verfügen auch über Methoden zum Hinzufügen oder Entfernen von Elementen zu den Daten des Ziehvorgangs.

Die Schnittstellen DragEventund DataTransfersollten die einzigen sein, die benötigt werden, um HTML-Drag-and-Drop-Funktionen zu einer Anwendung hinzuzufügen. (Firefox unterstützt einige Gecko-spezifische Erweiterungen für das DataTransferObjekt, aber diese Erweiterungen funktionieren nur mit Firefox.)

Jedes DataTransferObjekt enthält eine itemsEigenschaft, die eine listvon DataTransferItemObjekten ist. Ein DataTransferItemObjekt stellt ein einzelnes Ziehelement dar , jedes mit einer kindEigenschaft (entweder stringoder file) und einer typeEigenschaft für den MIME-Typ des Datenelements. Das DataTransferItemObjekt verfügt auch über Methoden zum Abrufen der Daten des gezogenen Elements.

Das DataTransferItemListObjekt ist eine Liste von DataTransferItemObjekten. Das Listenobjekt verfügt über Methoden zum Hinzufügen eines Ziehelements zur Liste, zum Entfernen eines Ziehelements aus der Liste und zum Löschen aller Ziehelemente aus der Liste.

Ein Hauptunterschied zwischen den Schnittstellen DataTransferund DataTransferItembesteht darin, dass erstere die synchrone getData()Methode verwendet, um auf die Daten eines Ziehelements zuzugreifen, letztere jedoch stattdessen die asynchrone getAsString()Methode verwendet.

Dieser Abschnitt ist eine Zusammenfassung der grundlegenden Schritte zum Hinzufügen von Drag-and-Drop-Funktionen zu einer Anwendung.

Um ein Element ziehbar zu machen , müssen das draggableAttribut und der ondragstartEreignishandler hinzugefügt werden, wie im folgenden Codebeispiel gezeigt:

<script>
  function dragstart_handler(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", dragstart_handler);
  });
</script>

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

Weitere Informationen finden Sie unter:

• Ziehbarer Attributverweis
• Anleitung zum Ziehen von Vorgängen

Der Anwendung steht es frei, eine beliebige Anzahl von Datenelementen in einen Ziehvorgang einzubeziehen. Jedes Datenelement ist eine bestimmte Zeichenfolge type– typischerweise ein MIME-Typ wie text/html.

Jeder drag eventhat eine dataTransferEigenschaft, die die Daten des Ereignisses enthält. Diese Eigenschaft (die ein DataTransferObjekt ist) hat auch Methoden zum Verwalten von Drag-Daten. Die setData()Methode wird verwendet, um ein Element zu den Drag-Daten hinzuzufügen, wie im folgenden Beispiel gezeigt.

function dragstart_handler(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 gängiger Datentypen, die beim Drag-and-Drop verwendet werden (z. B. Text, HTML, Links und Dateien), finden Sie unter Empfohlene Drag-Typen .
• Weitere Informationen zu Drag-Daten finden Sie unter Drag-Daten .

Standardmäßig stellt der Browser ein Bild bereit, das während eines Ziehvorgangs neben dem Mauszeiger angezeigt wird. Eine Anwendung kann jedoch ein benutzerdefiniertes Bild mit der setDragImage()Methode definieren, wie im folgenden Beispiel gezeigt.

function dragstart_handler(ev) {
  // 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';
  ev.dataTransfer.setDragImage(img, 10, 10);
}

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

• Festlegen des Drag-Feedback-Bildes

Die dropEffectEigenschaft wird verwendet, um das Feedback zu steuern, das der Benutzer während eines Drag-and-Drop-Vorgangs erhält. Es wirkt sich normalerweise darauf aus, welchen Cursor der Browser beim Ziehen anzeigt. Wenn der Benutzer beispielsweise mit der Maus über ein Ablegeziel fährt, kann der Cursor des Browsers die Art der Operation anzeigen, die stattfinden wird.

Drei Effekte können definiert werden:

1. copygibt an, dass die gezogenen Daten von ihrer aktuellen Position an die Ablageposition kopiert werden.
2. movegibt an, dass die gezogenen Daten von ihrer aktuellen Position an die Ablageposition verschoben werden.
3. linkgibt an, dass eine Art von Beziehung oder Verbindung zwischen den Quell- und Ablageorten erstellt wird.

Während des Ziehvorgangs können Zieheffekte modifiziert werden, um anzuzeigen, dass bestimmte Effekte an bestimmten Stellen erlaubt sind.

Das folgende Beispiel zeigt, wie diese Eigenschaft verwendet wird.

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

Weitere Einzelheiten finden Sie unter:

• Drag-Effekte

Standardmäßig verhindert der Browser, dass irgendetwas passiert, wenn etwas auf die meisten HTML-Elemente gezogen wird. Um dieses Verhalten so zu ändern, dass ein Element zu einer Drop-Zone wird oder droppable ist , muss das Element sowohl ondragoverals auch ondropEvent-Handler-Attribute haben.

Das folgende Beispiel zeigt, wie diese Attribute verwendet werden, und enthält grundlegende Ereignishandler für jedes Attribut.

<script>
  function dragover_handler(ev) {
    ev.preventDefault();
    ev.dataTransfer.dropEffect = "move";
  }
  function drop_handler(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="drop_handler(event)"
  ondragover="dragover_handler(event)">
  Drop Zone
</p>

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

Weitere Informationen finden Sie unter:

• Drop-Ziele angeben

Dem Handler für das dropEreignis steht es frei, die Ziehdaten anwendungsspezifisch zu verarbeiten.

Typischerweise verwendet eine Anwendung die getData()Methode, um gezogene Elemente abzurufen und sie dann entsprechend zu verarbeiten. Darüber hinaus kann sich die Anwendungssemantik abhängig vom Wert der dropEffectund/oder dem Status von Zusatztasten unterscheiden.

Das folgende Beispiel zeigt einen Drop-Handler, der die Quellelemente idaus den Drag-Daten erhält und dann verwendet id, um das Quellelement in das Drop-Element zu verschieben:

<script>
  function dragstart_handler(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 dragover_handler(ev) {
    ev.preventDefault();
    ev.dataTransfer.dropEffect = "move";
  }
  function drop_handler(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="dragstart_handler(event)">
  This element is draggable.
</p>
<div
  id="target"
  ondrop="drop_handler(event)"
  ondragover="dragover_handler(event)">
  Drop Zone
</div>

Weitere Informationen finden Sie unter:

• Einen Drop ausführen

Am Ende eines Ziehvorgangs wird das dragendEreignis beim Quellelement ausgelöst – dem Element, das das Ziel des Ziehvorgangs war.

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

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

• Einen Drag beenden

Wie in der Browser-Kompatibilitätstabelle der DataTransferItem-Schnittstelle zu sehen ist , ist die Drag-and-Drop-Interoperabilität bei Desktop-Browsern relativ breit gefächert (mit der Ausnahme, dass die Schnittstellen DataTransferItemund DataTransferItemListweniger unterstützt werden). Diese Daten weisen auch darauf hin, dass die Drag-and-Drop-Unterstützung bei mobilen Browsern sehr gering ist.

• Kopieren und Verschieben von Elementen mit der DataTransferOberfläche
• Kopieren und Verschieben von Elementen mit der DataTransferListItemOberfläche
• Drag & Drop von Dateien (nur Firefox): https://jsfiddle.net/9C2EF/
• Drag & Drop von Dateien (alle Browser): https://jsbin.com/hiqasek/
• Ein Parkprojekt, das die Drag-and-Drop-API verwendet: https://park.glitch.me/ (Sie können hier bearbeiten )

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