HTML Drag and Drop API

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

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

Sie können anpassen, welche Elemente draggable werden können, welche Art von Feedback die draggable Elemente erzeugen, und welche Elemente droppable sind.

Diese Übersicht über HTML Drag and Drop umfasst eine Beschreibung der Schnittstellen, grundlegende Schritte zur Hinzufügung von Drag-and-Drop-Unterstützung in eine Anwendung sowie eine Zusammenfassung der Interoperabilität der Schnittstellen.

Konzepte und Nutzung

Auf den ersten Blick gibt es eigentlich drei verschiedene Anwendungsfälle für Drag and Drop: Elemente innerhalb einer Seite ziehen, Daten aus einer Seite herausziehen und Daten in eine Seite ziehen. Diese haben leicht unterschiedliche Anforderungen und Implementierungen. Die Drag and Drop API bietet jedoch ein einheitliches Modell, um über all diese Interaktionen nachzudenken.

Im Kern umfasst ein Ziehvorgang drei Dinge:

Das Element, das gezogen wird
Die zugrunde liegenden Daten, die übertragen werden sollen
Das Ziel, auf dem abgelegt wird

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

Beim Ziehen externer Daten in eine Seite gibt es kein zu definierendes draggable Element (zum Beispiel könnte es sich um eine Datei im Datei-Explorer des Betriebssystems handeln).
Beim Ziehen von Elementen innerhalb einer Seite müssen Sie oft keine übertragenen Daten definieren; Sie manipulieren einfach das gezogene Element.
Wenn Sie Daten aus der Seite herausziehen, muss kein Ziel definiert werden.

Wir werden uns ansehen, wie jede definiert und verwendet werden kann.

Drag-Ereignisse

HTML Drag-and-Drop verwendet das DOM-Ereignismodell und drag events, die von mouse events erben. Während der Ziehvorgänge werden mehrere Ereignistypen ausgelöst, und einige Ereignisse könnten mehrmals ausgelöst werden, wie die drag und dragover Ereignisse.

Ereignis	Wird ausgelöst, wenn...
`dragstart`	...das draggable Element angefangen wird zu ziehen.
`drag`	...das draggable Element gezogen wird (wird wiederholt ausgelöst).
`dragenter`	...ein draggable Element eintritt.
`dragleave`	...ein draggable Element verlässt es.
`dragover`	...ein draggable Element über es gezogen wird (wird wiederholt ausgelöst).
`drop`	...das Element ein drop target ist und das draggable Element darüber abgelegt wird.
`dragend`	...das draggable Element aufhört, gezogen zu werden.

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

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

Weitere Informationen finden Sie unter Drag-Operationen.

Draggable Elemente

In HTML sind Bilder, Links und Selektionen standardmäßig draggable. Um ein beliebiges Element draggable zu machen, 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 das Zieh-Aussehen, obwohl noch kein Verhalten definiert ist:

Für Bilder und Links ist draggable standardmäßig auf true gesetzt, 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, können Text oder andere Elemente darin nicht mehr auf normale Weise durch Klicken und Ziehen mit der Maus ausgewählt werden. Stattdessen muss der Benutzer die Alt Taste gedrückt halten, um Text mit der Maus auszuwählen, oder die Tastatur verwenden.

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

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

Weitere Informationen finden Sie im Drag-Operationen-Leitfaden.

Drag-Datenbasis

Sie können keine JavaScript-Objekte direkt an beliebige Webseiten und sicher nicht an externe Anwendungen übertragen, daher müssen die Daten, um in die Webseite ein- und ausgehen zu können, in einen String (oder als File) serialisiert werden. Bei Drag and Drop wird dieser String in einem DataTransferItem Objekt gekapselt, das auch einen bestimmten type definiert – typischerweise ein MIME-Typ wie text/html –, der angibt, wie der String interpretiert werden sollte.

Jeder Drag-and-Drop-Vorgang hat eine zugehörige drag data store, die ein DataTransfer Objekt ist, das über die dataTransfer Eigenschaft des DragEvent zugänglich ist. Für die standardmäßig draggable Elemente wie Bilder, Links und Selektionen sind die Drag-Daten bereits vom Browser definiert; bei benutzerdefinierten draggable Elementen, die mit dem draggable Attribut definiert sind, müssen Sie die Drag-Daten selbst definieren. Der einzige Zeitpunkt, um Änderungen an der Datenbasis vorzunehmen, ist innerhalb des dragstart Handlers – für das dataTransfer eines anderen Drag-Ereignisses kann die Datenbasis nicht geändert werden.

Die setData() Methode kann verwendet werden, um ein Element 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 der einzige Zeitpunkt, an dem Sie aus der Datenbasis lesen können, abgesehen vom dragstart Ereignis, während des drop Ereignisses (was dem Ablageziel ermöglicht, die Daten abzurufen). Bei allen anderen Ereignissen kann nicht auf die Datenbasis zugegriffen werden.

Für weitere Informationen lesen Sie Arbeiten mit der Drag-Datenbasis.

Drop-Ziel

Ein drop target ist ein Element, auf das ein Nutzer ein gezogenes Element ablegen kann. Standardmäßig sind die meisten Elemente keine drop targets, und wenn Sie das Ziehen freigeben, wird eine "Zurückfliegen" Animation angezeigt, die darauf hinweist, dass das Drag and Drop fehlgeschlagen ist. Jedes Element kann ein drop target werden, indem das dragover Ereignis, das darauf ausgelöst wird, mit preventDefault() abgebrochen wird.

Das drop Ereignis wird nur auf drop targets ausgelöst, und es ist der einzige Zeitpunkt, an dem Sie die Drag-Datenbasis lesen können.

Das folgende Beispiel zeigt ein minimales gültiges drop target 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 Spezifizieren von Drop-Zielen.

Leitfäden

Drag-Operationen: Beschreibt die Schritte, die während eines Drag-and-Drop-Vorgangs auftreten, und was die Anwendung innerhalb jedes Handlers tun sollte.
Arbeiten mit der Drag-Datenbasis: Beschreibt, wie man während eines Drag-and-Drop-Vorgangs in die Drag-Datenbasis liest und schreibt.
Datei-Drag-and-Drop: Ein praktischer Leitfaden zur Implementierung einer grundlegenden Schnittstelle, die Dateiablagen akzeptiert.
Kanban-Board mit Drag-and-Drop: Ein praktischer Leitfaden zur Implementierung eines Kanban-Boards, das Elemente innerhalb einer Webseite durch Ziehen und Ablegen umfasst.

Schnittstellen

DragEvent: Das Ereignisobjekt, das an Drag-Event-Handler übergeben wird.
DataTransfer: Enthält alle Daten, die zwischen Kontexten übertragen werden, bestehend aus Text- und Dateieinträgen. Ursprünglich für Drag and Drop entwickelt, wird es jetzt auch in anderen Kontexten wie der Clipboard API verwendet.
DataTransferItem: Repräsentiert ein Element in der Drag-Datenbasis, das ein Textelement oder ein Dateielement sein kann.
DataTransferItemList: Repräsentiert die Liste der DataTransferItem Objekte in der Drag-Datenbasis.

Beispiele

Referenzseiten für jede Schnittstelle haben auch einzelne Beispiele.

Spezifikationen

Spezifikation
HTML

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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