Drag n drop api

HTML-Drag-and-Drop-API

HTML-Drag-and-Drop -Schnittstellen ermöglichen es Anwendungen, Drag-and-Drop-Funktionen in Browsern zu verwenden.

Der Benutzer kann ziehbare Elemente mit einer Maus auswählen, diese Elemente auf ein ziehbares Element ziehen und sie durch Loslassen der Maustaste fallen lassen. Eine durchscheinende Darstellung der ziehbaren Elemente folgt dem Zeiger während des Ziehvorgangs.

Sie können anpassen, welche Elemente ziehbar werden können , die Art des Feedbacks , das die ziehbaren Elemente erzeugen, und die Elemente, die abgelegt werden können .

Diese Übersicht über HTML Drag & Drop enthält eine Beschreibung der Schnittstellen, grundlegende Schritte zum Hinzufügen von Drag & Drop-Unterstützung zu einer Anwendung und eine Zusammenfassung der Interoperabilität der Schnittstellen.

Ereignisse ziehen

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:

Vorfall Feuert, wenn …
drag …ein gezogenes Element (Element oder Textauswahl) gezogen wird.
dragend …eine Ziehoperation endet (z. B. das Loslassen einer Maustaste oder das Drücken der Esc-Taste; siehe Beenden eines Ziehens .)
dragenter …ein gezogenes Element tritt in ein gültiges Drop-Ziel ein. (Siehe Drop-Ziele festlegen .)
dragleave …ein gezogenes Element hinterlässt ein gültiges Ablageziel.
dragover … wird alle paar hundert Millisekunden ein gezogenes Element über ein gültiges Ablageziel gezogen.
dragstart … beginnt der Benutzer, ein Element zu ziehen. (Siehe Starten eines Ziehvorgangs .)
drop …ein Gegenstand auf einem gültigen Drop-Target abgelegt wird. (Siehe Einen Drop durchführen .)

Hinweis: Beim Ziehen einer Datei aus dem Betriebssystem in den Browser werden weder dragstartnoch dragend-Ereignisse ausgelöst.

Schnittstellen

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.

Hinweis: DragEvent und DataTransferwerden von Desktop-Browsern weitgehend unterstützt. Die Schnittstellen DataTransferItemund DataTransferItemListhaben jedoch eine eingeschränkte Browserunterstützung. Weitere Informationen zur Drag-and-Drop-Interoperabilität finden Sie unter Interoperabilität .

Die Grundlagen

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

Identifizieren Sie, was ziehbar ist

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:

Definieren Sie die Drag-Daten

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 .

Definieren Sie das Ziehbild

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:

Definieren Sie den Drop-Effekt

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:

Definieren Sie eine Dropzone

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:

Behandeln Sie den Drop-Effekt

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:

Ende ziehen

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:

Interoperabilität

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.

Beispiele und Demos

Spezifikationen

Spezifikation
HTML-Standard # dnd

Siehe auch