HTML Academy · Lektion

Praxisprojekt: Liste per Drag-and-drop neu ordnen

Erstellen Sie mit der Drag-and-Drop-API eine Liste, deren Reihenfolge sich ändern lässt

Praxisprojekt: Liste per Drag-and-drop neu ordnen ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Musterübersicht

Um eine Liste mit Drag-and-drop-Neuordnung zu erstellen, machen Sie jedes Element ziehbar, speichern Sie die id des gezogenen Elements bei dragstart in dataTransfer und fügen Sie beim drop das gezogene Element vor oder nach dem Ziel ein. DOM und Modell bleiben synchron, wenn Sie die Reihenfolge nach jedem drop aus dem DOM neu aufbauen.

Markup

Rendern Sie eine flache Liste, in der jedes li draggable="true" und eine data-id enthält. Wenn die IDs auf den Elementen stehen, müssen die Drag-Handler keinen separaten State-Speicher abfragen, um die Elemente zu identifizieren – das Element selbst ist die maßgebliche Quelle.

<ul id="list">
  <li draggable="true" data-id="1">Item 1</li>
  <li draggable="true" data-id="2">Item 2</li>
  <li draggable="true" data-id="3">Item 3</li>
</ul>

dragstart erfasst die Quelle

Speichern Sie bei dragstart die ID des gezogenen Elements in dataTransfer und wenden Sie für visuelles Feedback die Klasse "dragging" an. effectAllowed="move" teilt dem Browser mit, dass es sich um eine Neuordnung und nicht um einen Kopiervorgang handelt, sodass Cursor und dropEffect eine Verschiebeoperation widerspiegeln.

list.addEventListener("dragstart", (e) => {
  const li = e.target.closest("li");
  if (!li) return;
  e.dataTransfer.setData("text/plain", li.dataset.id);
  e.dataTransfer.effectAllowed = "move";
  li.classList.add("dragging");
});

dragover ermöglicht das Ablegen

Hören Sie auf der Liste (per Eventdelegation) auf das Ereignis, rufen Sie preventDefault auf und setzen Sie dropEffect auf "move". Verwenden Sie e.target.closest("li"), um die Zeile unter dem Mauszeiger zu finden, sodass derselbe Handler für die gesamte Liste funktioniert.

Einfügeposition berechnen

Um zu entscheiden, ob das gezogene Element über oder unter der Zeile unter dem Mauszeiger eingefügt werden soll, vergleichen Sie die Y-Position des Cursors mit der vertikalen Mitte der Zeile: const before = (e.clientY - rect.top) < rect.height / 2. before=true bedeutet insertBefore, false bedeutet insertAfter.

function getInsertBefore(target, clientY) {
  const rect = target.getBoundingClientRect();
  return clientY < rect.top + rect.height / 2;
}

drop ordnet das DOM neu

Suchen Sie im drop-Handler das gezogene Element anhand seiner ID und die Zeile unter dem Cursor. Rufen Sie je nach berührter Hälfte des Ziels list.insertBefore(dragged, target) oder list.insertBefore(dragged, target.nextSibling) auf.

dragend bereinigt Stile

Unabhängig davon, ob das Ablegen erfolgreich war oder die Benutzerin beziehungsweise der Benutzer Escape gedrückt hat, wird dragend immer an der Quelle ausgelöst. Verwenden Sie das Ereignis, um die Klasse "dragging" und alle Hervorhebungen von Ablagezielen zu entfernen, damit die Liste in ihren Ausgangszustand zurückkehrt.

list.addEventListener("dragend", () => {
  list.querySelectorAll(".dragging, .over").forEach((el) => {
    el.classList.remove("dragging", "over");
  });
});

Visuelle Einfügeanzeige

Zeigen Sie mithilfe eines CSS-Pseudoelements an der Zeile unter dem Mauszeiger eine dünne Linie an, an der das Element eingefügt wird. Schalten Sie sie über die Klasse "over-top" oder "over-bottom", die der dragover-Handler anhand der Cursorposition setzt. So sieht die Benutzerin beziehungsweise der Benutzer die Einfügeposition bereits vor dem Loslassen.

Modell synchronisieren

Leiten Sie die neue Reihenfolge nach dem drop aus dem DOM ab: const order = Array.from(list.children).map((li) => li.dataset.id). Senden Sie dieses Array an den Server oder speichern Sie es im State – versuchen Sie niemals, parallel zum DOM einen separaten Index zu verwalten, da dieser bei schnellen Drag-Vorgängen aus dem Takt gerät.

Tastaturalternative

Fügen Sie Up/Down-Handler hinzu, die das fokussierte Element mit insertBefore verschieben. Verkünden Sie die Verschiebung über eine aria-live-Region ("Element an Position 2 nach oben verschoben"). Tastaturbenutzer erhalten dadurch dieselbe Funktionalität, ohne die visuelle Drag-Funktion verwenden zu müssen – das ist für die Barrierefreiheit unerlässlich.

Touch-freundlicher Fallback

Ersetzen Sie auf Mobilgeräten den nativen Drag-Vorgang durch Pointer Events: Erfassen Sie die Zeile bei pointerdown, verschieben Sie sie bei pointermove mit einer CSS-Transformation und ermitteln Sie bei pointerup per Hit-Test die darunterliegende Zeile, um die Reihenfolge neu zu ordnen. Bibliotheken wie SortableJS kapseln dieses Muster für verschiedene Eingabetypen.

Wissenscheck

Warum berechnen wir die Einfügeposition anhand der Cursorposition relativ zur vertikalen Mitte der Zeile unter dem Mauszeiger?

Zusammenfassung

Eine robuste Liste zur Neuordnung kombiniert draggable="true" + dragstart (ID erfassen, effectAllowed=move) + dragover (preventDefault + Position der Einfügeanzeige) + drop (insertBefore an der aus der Mitte abgeleiteten Position) + dragend (Aufräumen). Leiten Sie die neue Reihenfolge nach dem drop immer aus dem DOM ab und stellen Sie für die Barrierefreiheit eine Tastaturalternative bereit.

Häufig gestellte Fragen

Ist die Lektion „Praxisprojekt: Liste per Drag-and-drop neu ordnen“ kostenlos?

Ja — der vollständige Text von „Praxisprojekt: Liste per Drag-and-drop neu ordnen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Praxisprojekt: Liste per Drag-and-drop neu ordnen“?

Erstellen Sie mit der Drag-and-Drop-API eine Liste, deren Reihenfolge sich ändern lässt Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Praxisprojekt: Liste per Drag-and-drop neu ordnen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

draggable-Attribut und dragstart-Ereignis
dragover- und drop-Ereignisse
dataTransfer-Objekt
Praxisprojekt: Liste per Drag-and-drop neu ordnen

← Zurück zu HTML Academy