HTML Drag and Drop API

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

Der Benutzer kann draggable Elemente mit einer Maus auswählen, diese Elemente zu einem droppable Element ziehen und sie durch Loslassen der Maustaste ablegen. Eine durchscheinende Darstellung der draggable Elemente folgt dem Zeiger während des Ziehvorgangs.

Sie können anpassen, welche Elemente draggable werden können, die Art des Feedbacks, das die draggable Elemente erzeugen, und die droppable Elemente.

Diese Übersicht über HTML Drag and Drop enthält eine Beschreibung der Schnittstellen, grundlegende Schritte zur Integration von Drag-and-Drop-Unterstützung in eine Anwendung und eine Zusammenfassung der Interoperabilität der Schnittstellen.

Konzepte und Nutzung

Oberflächlich betrachtet hat Drag and Drop tatsächlich drei unterschiedliche Anwendungsfälle: Elemente innerhalb einer Seite ziehen, Daten aus einer Seite herausziehen und Daten in eine Seite hineinziehen. Sie haben subtil unterschiedliche Anforderungen und Implementierungen. Das Drag and Drop API bietet jedoch ein einheitliches Modell, um alle diese Interaktionen zu betrachten.

Im Kern umfasst ein Ziehvorgang drei Dinge:

Das zu ziehende Element
Die zu übertragenden Daten
Das Zielfeld

Es ist nicht unbedingt wahr, dass alle drei unter Ihrer Kontrolle stehen oder dass Sie sie selbst definieren müssen:

Beim Ziehen externer Daten in eine Seite gibt es kein zu definierendes draggable Element (z. B. könnte es sich um eine Datei im Dateiexplorer des Betriebssystems handeln).
Beim Ziehen von Elementen innerhalb einer Seite müssen Sie häufig keine übertragenen Daten definieren; Sie manipulieren einfach das gezogene Element.
Beim Ziehen aus der Seite gibt es kein zu definierendes Zielfeld.

Wir werden uns ansehen, wie jeder davon definiert und genutzt werden kann.

Ziehereignisse

HTML Drag-and-Drop nutzt das DOM-Ereignismodell und Ziehereignisse, die von Mausevents erben. Während der Ziehvorgänge werden mehrere Ereignistypen ausgelöst, und einige Ereignisse könnten oft ausgelöst werden, wie z. B. die Ereignisse drag und dragover.

Ereignis	Wird ausgelöst, wenn...
`dragstart`	...das draggable Element beginnt zu ziehen.
`drag`	...das draggable Element wird gezogen, alle paar hundert Millisekunden.
`dragenter`	...das Element ein draggable Element hineinzuführen hat.
`dragleave`	...das Element ein draggable Element verlässt.
`dragover`	...das Element ein draggable Element über sich gezogen bekommt, alle paar hundert Millisekunden.
`drop`	...das Element ein Zielfeld ist und das draggable Element darüber abgelegt wird.
`dragend`	...das draggable Element aufhört gezogen zu werden.

Hinweis: Die Ereignisse dragstart, drag und dragend werden beim gezogenen Element ausgelöst und können daher nicht ausgelöst werden, wenn eine Datei aus dem Betriebssystem in den Browser gezogen wird.

Genauso werden die Ereignisse dragenter, dragleave, dragover und drop auf Elementen ausgelöst, die potenzielle Zielfelder sind, und können daher nicht ausgelöst werden, wenn ein Element aus dem Browser gezogen wird.

Weitere Informationen finden Sie unter Ziehvorgänge.

Draggable-Elemente

In HTML sind Bilder, Links und Markierungen standardmäßig draggable. Um ein beliebiges Element als draggable zu definieren, setzen Sie das draggable-Attribut auf den Wert "true".

html

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

An diesem Punkt hat das Element bereits die Zieh-Erscheinung, auch wenn noch kein Verhalten definiert ist:

Für Bilder und Links ist draggable standardmäßig auf true, sodass Sie es nur auf false setzen würden, um das Ziehen dieser Elemente zu deaktivieren. Bei nicht draggable Elementen bewirkt die "Ziehen"-Geste normalerweise, dass der Text ausgewählt wird.

Hinweis: Wenn ein Element draggable gemacht wird, kann Text oder andere Elemente darin nicht mehr auf die normale Weise ausgewählt werden, indem man mit der Maus klickt und zieht. Stattdessen muss der Benutzer die Alt-Taste gedrückt halten, um Text mit der Maus auszuwählen, oder die Tastatur verwenden.

Eine Markierung ist ebenfalls draggable. In diesem Fall ist der Quelldatenpunkt, oder der Knoten, auf dem verschiedene Ereignisse wie dragstart und dragend ausgelöst werden, der Textknoten, auf dem das Ziehen begonnen hat. Die Markierung kann mehrere Knoten teilweise oder vollständig enthalten, einschließlich Textknoten und Elementknoten, die alle gleichzeitig als gezogen betrachtet werden.

Wie bereits erwähnt, kann das gezogene Element auch etwas außerhalb einer Webseite sein - zum Beispiel eine Datei im Dateiexplorer des Betriebssystems. Allerdings können nur Elemente auf der Webseite die Ereignisse dragstart und dragend auslösen.

Weitere Informationen finden Sie im Leitfaden zu Ziehvorgängen.

Drag-Datenspeicher

Sie können JavaScript-Objekte nicht direkt auf beliebige Webseiten übertragen, und sicherlich nicht auf externe Anwendungen. Um Daten in und aus der Webseite zu übertragen, müssen die Daten in eine Zeichenkette serialisiert werden (oder als File). Bei Drag and Drop ist diese Zeichenkette in einem DataTransferItem-Objekt gekapselt, welches auch einen bestimmten type definiert - typischerweise einen MIME-Typ wie text/html -, der definiert, wie die Zeichenkette interpretiert werden soll.

Jede Drag-and-Drop-Operation hat einen zugeordneten drag data store, der ein DataTransfer-Objekt ist und über die dataTransfer-Eigenschaft des DragEvent zugänglich ist. Bei den standardmäßig draggable Elementen wie Bildern, Links und Markierungen sind die Drag-Daten bereits vom Browser definiert. Bei benutzerdefinierten draggable Elementen, die mit dem draggable-Attribut definiert werden, müssen Sie die Drag-Daten selbst definieren. Die einzige Zeit, zu der jegliche Modifikationen am Datenspeicher vorgenommen werden können, ist innerhalb des dragstart-Handlers - für das dataTransfer jedes anderen Ziehereignisses ist der Datenspeicher nicht modifizierbar.

Die Methode setData() kann verwendet werden, um einen Artikel zu den Drag-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,
  );
}

const p1 = document.getElementById("p1");
p1.addEventListener("dragstart", dragstartHandler);

Darüber hinaus ist die einzige Zeit, zu der Sie aus dem Datenspeicher lesen können, abgesehen von dem dragstart-Ereignis, während des drop-Ereignisses (was dem Zielfeld ermöglicht, die Daten abzurufen). Für alle anderen Ereignisse kann auf den Datenspeicher nicht zugegriffen werden.

Weitere Informationen finden Sie unter Arbeiten mit dem Drag-Datenspeicher.

Zielfeld

Ein Zielfeld ist ein Element, auf dem ein Benutzer ein gezogenes Element ablegen kann. Standardmäßig sind die meisten Elemente keine Zielfelder, und wenn Sie den Zug freigeben, wird eine "Zurück-Flieg"-Animation angezeigt, die anzeigt, dass das Ziehen und Ablegen fehlgeschlagen ist. Jedes Element kann durch das Abbrechen des dragover-Ereignisses mit preventDefault() zu einem Zielfeld werden.

Das drop-Ereignis wird nur auf Zielfeldern ausgelöst, und es ist die einzige Zeit, zu der Sie den Drag-Datenspeicher lesen können.

Das folgende Beispiel zeigt ein minimales gültiges Zielfeld und kombiniert auch den Code aus den vorherigen Beispielen.

html

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

const target = document.getElementById("target");

// Cancel dragover so that drop can fire
target.addEventListener("dragover", (ev) => {
  ev.preventDefault();
});
target.addEventListener("drop", (ev) => {
  ev.preventDefault();
  const data = ev.dataTransfer.getData("text/plain");
  ev.target.append(data);
});

Weitere Informationen finden Sie unter Festlegen von Zielfeldern.

Anleitungen

Ziehvorgänge: Beschreibt die Schritte, die während eines Zieh- und Abladevorgangs auftreten, und was die Anwendung innerhalb jedes Handlers tun soll.
Arbeiten mit dem Drag-Datenspeicher: Beschreibt, wie während eines Zieh- und Ablegevorgangs auf den Drag-Datenspeicher zugegriffen und in ihn geschrieben wird.
Datei-Ziehen und -Ablegen: Eine praktische Anleitung zur Implementierung einer Basisoberfläche, die das Ablegen von Dateien akzeptiert.
Kanban-Board mit Drag and Drop: Eine praktische Anleitung zur Implementierung eines Kanban-Boards, bei dem Elemente innerhalb einer Webseite gezogen und abgelegt werden.

Schnittstellen

DragEvent: Das Ereignisobjekt, das an Ziehereignishandler übergeben wird.
DataTransfer: Hält alle zwischen Kontexten übertragenen Daten, bestehend aus Textelementen und Dateielementen. Ursprünglich für Drag and Drop entworfen, wird es jetzt auch in anderen Kontexten wie der Clipboard API verwendet.
DataTransferItem: Repräsentiert einen Eintrag im Drag-Datenspeicher, der ein Textelement oder ein Dateielement sein kann.
DataTransferItemList: Repräsentiert die Liste der DataTransferItem-Objekte im Drag-Datenspeicher.

Beispiele

Referenzseiten für jede Schnittstelle haben auch einzelne Beispiele.

Spezifikationen

Specification
HTML

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden