HTML Drag and Drop API

HTML Drag and Drop Schnittstellen ermglichen es Anwendungen, Drag-and-Drop-Funktionen in Browsern zu nutzen.

Der Benutzer kann draggable Elemente mit der Maus auswhlen, diese Elemente zu einem droppable Element ziehen und sie durch Loslassen der Maustaste ablegen. Eine durchscheinende Darstellung der draggable Elemente folgt dem Zeiger whrend des Ziehvorgangs.

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

Dieser berblick ber HTML Drag and Drop enthlt eine Beschreibung der Schnittstellen, grundlegende Schritte zur Hinzufgung von Drag-and-Drop-Untersttzung zu einer Anwendung und eine Interoperabilittszusammenfassung der Schnittstellen.

Konzepte und Nutzung

An der Oberflche hat Drag and Drop tatschlich drei unterschiedliche Anwendungsflle: Elemente innerhalb einer Seite ziehen, Daten aus einer Seite ziehen und Daten in eine Seite ziehen. Sie haben subtil unterschiedliche Anforderungen und Implementierungen. Dennoch bietet die Drag and Drop API ein einheitliches Modell zur Betrachtung all dieser Interaktionen.

Im Kern umfasst ein Ziehvorgang drei Dinge:

Das Element, das gezogen wird
Die zu bertragenden Daten
Das Ziel, auf dem abgelegt wird

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

Beim Ziehen externer Daten in eine Seite gibt es kein zu definierendes draggable Item (zum Beispiel knnte es sich um eine Datei im Dateiexplorer des Betriebssystems handeln).
Beim Ziehen von Elementen innerhalb einer Seite mssen Sie oft keine zu bertragenden Daten definieren; Sie manipulieren einfach das gezogene Element.
Beim Herausziehen von der Seite gibt es kein zu definierendes Zielobjekt.

Wir werden untersuchen, wie jeder dieser Aspekte definiert und genutzt werden kann.

Drag-Ereignisse

HTML Drag-and-Drop verwendet das DOM-Ereignismodell und die von Mausereignissen geerbten drag events. Whrend Ziehvorgnge werden mehrere Ereignistypen ausgelst, und einige Ereignisse knnten viele Male ausgelst werden, wie zum Beispiel die Ereignisse drag und dragover.

Ereignis	Wird ausgelst, wenn...
`dragstart`	...das draggable Item zu ziehen beginnt.
`drag`	...das draggable Item gezogen wird, alle paar hundert Millisekunden.
`dragenter`	...das Element ein draggable Item betritt.
`dragleave`	...das Element ein draggable Item verlsst.
`dragover`	...das Element von einem draggable Item berzogen wird, alle paar hundert Millisekunden.
`drop`	...das Element ein drop-Ziel ist und das draggable Item darber losgelassen wird.
`dragend`	...das draggable Item das Ziehen beendet.

Hinweis: Die Ereignisse dragstart, drag und dragend werden auf dem gezogenen Element ausgelst und knnen daher nicht auftreten, wenn eine Datei vom Betriebssystem in den Browser gezogen wird.

Ebenso werden die Ereignisse dragenter, dragleave, dragover und drop auf Elementen ausgelst, die potenzielle Ablageziele sind, und knnen daher nicht auftreten, wenn ein Element aus dem Browser herausgezogen wird.

Fr weitere Informationen siehe Drag-Vorgnge.

Draggable Elemente

In HTML sind Bilder, Links und Auswahlen standardmig draggable. Um ein beliebiges Element draggable zu machen, setzen Sie das Attribut draggable auf den Wert "true".

html

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

Zu diesem Zeitpunkt hat das Element bereits das Zieherscheinen, obwohl noch kein Verhalten definiert ist:

Fr Bilder und Links ist draggable standardmig auf true, sodass Sie es nur auf false setzen wrden, um das Ziehen dieser Elemente zu deaktivieren. Bei nicht draggable Elementen wird mit der "Zieh"-Geste normalerweise der Text ausgewhlt.

Hinweis: Wenn ein Element draggable gemacht wird, knnen der Text oder andere Elemente innerhalb davon nicht mehr auf die normale Weise durch Klicken und Ziehen mit der Maus ausgewhlt werden. Stattdessen muss der Benutzer die Alt-Taste gedrckt halten, um Text mit der Maus auszuwhlen, oder die Tastatur verwenden.

Eine Auswahl ist ebenfalls draggable. In diesem Fall ist der source node oder der Knoten, auf dem Ereignisse wie dragstart und dragend ausgelst werden, der Textknoten, auf dem das Ziehen begonnen hat. Die Auswahl kann teilweise oder vollstndig mehrere Knoten enthalten, einschlielich Textknoten und Elementknoten, die alle gleichzeitig als gezogen betrachtet werden.

Wie bereits erwhnt, kann das gezogene Element auch etwas sein, das sich nicht auf einer Webseite befindetzum Beispiel eine Datei im Dateiexplorer des Betriebssystems. Allerdings knnen nur Elemente auf der Webseite die Ereignisse dragstart und dragend auslsen.

Fr weitere Informationen siehe den Leitfaden zu Drag-Vorgngen.

Drag-Datenspeicher

Sie knnen keine JavaScript-Objekte direkt auf beliebige Webseiten bertragen, und sicherlich nicht auf externe Anwendungen. Um Daten in und aus der Webseite zu bertragen, mssen die Daten in einen String serialisiert werden (oder als File). Bei Drag and Drop ist dieser String in einem DataTransferItem-Objekt gekapselt, das auch einen bestimmten type definierttypischerweise ein MIME-Typ wie text/htmlder definiert, wie der String interpretiert werden soll.

Jeder Drag-and-Drop-Vorgang hat einen zugehrigen drag data store, welches ein DataTransfer-Objekt ist, das ber die dataTransfer-Eigenschaft des DragEvent zugnglich ist. Fr standardmig draggable Elemente wie Bilder, Links und Auswahlen sind die Drag-Daten bereits vom Browser definiert; fr benutzerdefinierte draggable Elemente, die mit dem Attribut draggable definiert wurden, mssen Sie die Drag-Daten selbst definieren. Die einzige Zeit, zu der Sie nderungen am Datenspeicher vornehmen knnen, ist innerhalb des dragstart-Handlersfr die dataTransfer eines anderen Drag-Ereignisses ist der Datenspeicher nicht modifizierbar.

Die Methode setData() kann verwendet werden, um ein Element zu den Drag-Daten hinzuzufgen, 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);

Darber hinaus ist die einzige Zeit, zu der Sie aus dem Datenspeicher lesen knnen, abgesehen vom dragstart-Ereignis, whrend des drop-Ereignisses (was dem Ablageziel ermglicht, die Daten abzurufen). Fr alle anderen Ereignisse kann nicht auf den Datenspeicher zugegriffen werden.

Fr weitere Informationen, lesen Sie Arbeiten mit dem Drag-Datenspeicher.

Drop-Ziel

Ein drop target ist ein Element, auf dem ein Benutzer ein gezogenes Element ablegen kann. Standardmig sind die meisten Elemente keine Drop-Ziele, und wenn Sie das Ziehen loslassen, wird eine "Zurck-Fly"-Animation angezeigt, die anzeigt, dass das Ziehen und Ablegen fehlgeschlagen ist. Jedes Element kann ein Drop-Ziel werden, indem das dragover-Ereignis, das darauf ausgelst wird, mit preventDefault() abgebrochen wird.

Das drop-Ereignis wird nur auf Drop-Zielen ausgelst, und es ist der einzige Zeitpunkt, zu dem Sie den Drag-Datenspeicher lesen knnen.

Das folgende Beispiel zeigt ein minimales gltiges Drop-Ziel und kombiniert zustzlich 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);
});

Fr weitere Informationen siehe Festlegen von Drop-Zielen.

Leitfden

Drag-Vorgnge: Beschreibt die Schritte, die whrend eines Drag-and-Drop-Vorgangs stattfinden, und was die Anwendung in jedem Handler tun soll.
Arbeiten mit dem Drag-Datenspeicher: Beschreibt, wie man whrend eines Drag-and-Drop-Vorgangs den Drag-Datenspeicher liest und schreibt.
Datei-Drag-and-Drop: Ein praktischer Leitfaden zur Implementierung einer einfachen Schnittstelle, die Dateiabwrfe akzeptiert.
Kanban-Board mit Drag-and-Drop: Ein praktischer Leitfaden zur Implementierung eines Kanban-Boards, bei dem Elemente innerhalb einer Webseite gezogen und abgelegt werden.

Schnittstellen

DragEvent: Das Ereignisobjekt, das an Drag-Event-Handler bergeben wird.
DataTransfer: Enthlt alle zwischen Kontexten bertragenen Daten, bestehend aus Textelementen und Dateielementen. Ursprnglich fr Drag-and-Drop entwickelt, wird es jetzt auch in anderen Kontexten wie der Clipboard API genutzt.
DataTransferItem: Reprsentiert ein Element im Drag-Datenspeicher, das ein Textelement oder ein Dateielement sein kann.
DataTransferItemList: Reprsentiert die Liste von DataTransferItem-Objekten im Drag-Datenspeicher.

Beispiele

Referenzseiten fr jede Schnittstelle haben auch individuelle Beispiele.

Spezifikationen

Spezifikation
HTML

Siehe auch

Help improve MDN

War diese bersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen knnen Diese Seite wurde automatisch aus dem Englischen bersetzt.

bersetzung auf GitHub anzeigen Fehler mit dieser bersetzung melden