Drag- und Drop-Events

Mit Drag & Drop kannst du etwas auf der Seite anfassen, verschieben und woanders wieder ablegen. Das kennst du z. B. von Dateien, die du in einen Ordner ziehst, oder von Karten in einer To-do-Liste.

Der Browser meldet dir dabei mehrere Events – vom Start des Ziehens bis zum Ablegen. Mit JavaScript reagierst du darauf und entscheidest, was passieren soll.

dragstart

dragstart ist der Startschuss: Es wird ausgelöst, sobald du ein Element anfängst zu ziehen.

An dieser Stelle packst du oft Infos ein, die später beim Ablegen gebraucht werden – zum Beispiel eine ID oder einen Text. Dafür nutzt du event.dataTransfer.setData(). Stell dir vor: Du schreibst auf einen Zettel, was du gerade ziehst, und nimmst den Zettel mit.

1const karte = document.getElementById("karte");
2
3karte.addEventListener("dragstart", function(event) {
4    event.dataTransfer.setData("text/plain", "karte-1");
5    console.log("Ziehen gestartet");
6});

drag

Während du das Element bewegst, feuert drag immer wieder – also viele Male hintereinander.

Das Event eignet sich für kleine Hinweise („wird gezogen…“). Schwere Arbeit solltest du hier nicht machen, weil es so oft kommt und die Seite sonst ruckeln kann.

1karte.addEventListener("drag", function() {
2    console.log("Element wird gerade gezogen");
3});

dragend

dragend kommt am Schluss: Du hast die Maustaste losgelassen. Das gilt auch, wenn du das Element gar nicht in einer Zone abgelegt hast – zum Beispiel wenn du daneben loslässt.

Typischer Einsatz: Optik zurücksetzen, also Schatten oder Transparenz wieder entfernen, die du beim Ziehen gesetzt hast.

1karte.addEventListener("dragend", function() {
2    console.log("Ziehen beendet");
3});

dragover

dragover gehört zum Ziel: Es feuert, solange du mit dem gezogenen Element über einer möglichen Ablagefläche bist.

Wichtig: Der Browser erlaubt Ablage standardmäßig nicht. Du musst event.preventDefault() aufrufen – erst dann darf danach ein drop stattfinden. Oft färbst du die Zone hier auch farblich ein, damit klar ist: „Hier kannst du ablegen.“

1const zone = document.getElementById("ablage");
2
3zone.addEventListener("dragover", function(event) {
4    event.preventDefault(); // nötig, damit drop erlaubt ist
5    console.log("Element schwebt über der Zone");
6});

drop

drop ist der Moment des Ablegens: Du lässt das Element über der Zone los.

Jetzt liest du den „Zettel“ wieder aus – mit event.dataTransfer.getData(). So weißt du, was abgelegt wurde, und kannst z. B. den Text in der Zone anzeigen oder ein Element verschieben. Auch hier brauchst du oft preventDefault().

1zone.addEventListener("drop", function(event) {
2    event.preventDefault();
3    const daten = event.dataTransfer.getData("text/plain");
4    console.log("Abgelegt:", daten);
5});

Elemente mit draggable ziehbar machen

Nicht jedes HTML-Element lässt sich von allein ziehen. Ein normales div zum Beispiel ist standardmäßig „festgenagelt“.

Mit dem Attribut draggable="true" sagst du dem Browser: Dieses Element darf gezogen werden. Links und Bilder sind oft schon ziehbar – eigene Boxen und Karten musst du meist selbst freigeben.

1<div id="karte" draggable="true">Zieh mich</div>
2<div id="ablage">Hier ablegen</div>

Merksatz: Bei dragstart Daten speichern, bei dragover mit preventDefault() Ablegen erlauben und bei drop die Daten auslesen.