So implementieren Sie Drag and Drop in Svelte

Drag and Drop fühlt sich einfach an, bis man versucht, es zu implementieren. Der Browser bietet eine native API, aber diese hat echte Einschränkungen: keine flüssigen Animationen, inkonsistente Touch-Unterstützung und unvorhersehbares Verhalten über verschiedene Browser hinweg. Wenn Sie jemals beobachtet haben, wie Elemente beim Ablegen ungeschickt einrasten, kennen Sie das Problem.

Dieser Leitfaden behandelt zwei praktische Ansätze zur Implementierung von Drag and Drop in Svelte – mit der nativen HTML5-API und mit einer Bibliothek – damit Sie das richtige Werkzeug für das wählen können, was Sie tatsächlich entwickeln.

Die zwei Ansätze verstehen

Bevor Sie Code schreiben, hilft es zu verstehen, zwischen welchen Optionen Sie wählen.

Native HTML5 Drag and Drop API verwendet browserintegrierte Events: dragstart, dragover, dragenter, dragleave und drop. Sie benötigt keine Abhängigkeiten und funktioniert gut für einfache Anwendungsfälle. Der Kompromiss besteht darin, dass Animationen manuelle Arbeit erfordern, Touch-Unterstützung über verschiedene Geräte hinweg inkonsistent ist und visuelles Feedback während des Ziehens begrenzt ist. Mehr über die API können Sie in der MDN Drag and Drop Dokumentation lesen.

Bibliotheksbasierte Lösungen wie svelte-dnd-action oder Neodrag übernehmen die schwierigen Teile – flüssige FLIP-Animationen, Touch-Unterstützung und barrierefreie Interaktionen – direkt einsatzbereit. Sie erhöhen die Bundle-Größe geringfügig, sparen aber erhebliche Implementierungszeit für alles, was über eine einfache sortierbare Liste hinausgeht.

Drag and Drop in Svelte 5 mit der nativen API implementieren

Hier ist ein sauberes Beispiel für die Neuordnung einer einzelnen Liste mit Svelte 5 Runes-Syntax:

<script>
  let items = $state(['Svelte', 'SvelteKit', 'Vite', 'TypeScript']);
  let dragIndex = $state(null);

  function handleDragStart(event, index) {
    dragIndex = index;
    event.dataTransfer.effectAllowed = 'move';
  }

  function handleDragOver(event, index) {
    event.preventDefault();
    if (dragIndex === null || dragIndex === index) return;

    const updated = [...items];
    const [moved] = updated.splice(dragIndex, 1);
    updated.splice(index, 0, moved);

    items = updated;
    dragIndex = index;
  }

  function handleDragEnd() {
    dragIndex = null;
  }
</script>

<ul>
  {#each items as item, index (item)}
    <li
      draggable="true"
      class:dragging={dragIndex === index}
      ondragstart={(e) => handleDragStart(e, index)}
      ondragover={(e) => handleDragOver(e, index)}
      ondragend={handleDragEnd}
    >
      {item}
    </li>
  {/each}
</ul>

<style>
  li {
    padding: 10px 16px;
    margin: 6px 0;
    background: #f1f1f1;
    cursor: grab;
    list-style: none;
    border-radius: 4px;
  }
  .dragging {
    opacity: 0.4;
  }
</style>

Ein paar bemerkenswerte Punkte zu diesem Svelte 5 Pattern:

• $state() ersetzt die alten reaktiven Variablendeklarationen aus Svelte 3/4.
• Svelte 5 unterstützt auch die ondragstart-Attributsyntax zusätzlich zur traditionellen on:dragstart Event-Direktive.
• Die Liste aktualisiert sich während des Ziehens (bei dragover), nicht erst beim Ablegen – dies gibt Benutzern Echtzeit-Feedback.

SvelteKit-Hinweis: Drag-Events sind nur clientseitig. Wenn Sie SvelteKit mit SSR verwenden, umschließen Sie jegliche Drag-bezogene Logik mit onMount oder sichern Sie sie mit einer browser-Prüfung aus $app/environment ab.

Wann svelte-dnd-action stattdessen verwendet werden sollte

Der native Ansatz funktioniert für einfache Szenarien zur Neuordnung von Listen. Sobald Sie jedoch eines der folgenden Dinge benötigen, greifen Sie zu svelte-dnd-action:

• Flüssige FLIP-Animationen zwischen Listenpositionen
• Multi-Listen Drag and Drop (Kanban-Style Boards)
• Touch- und Mobile-Unterstützung ohne zusätzlichen Code
• Barrierefreie Tastaturinteraktionen bereits integriert

Das svelte-dnd-action-Pattern ist unkompliziert – Sie wenden eine use:dndzone-Action auf Ihren Container an, übergeben Ihr Items-Array und behandeln consider- und finalize-Events, um den State zu aktualisieren. Jedes Item benötigt eine eindeutige id-Eigenschaft. Kombinieren Sie es mit Sveltes integrierter flip-Animation und Sie erhalten produktionsreife Drag-Interaktionen in unter 20 Zeilen.

Fazit

Für einfaches Neuordnen von Listen mit Drag and Drop in Svelte bringt Sie die native Browser-API mit Svelte 5 Runes ohne Abhängigkeiten ans Ziel. Für alles Komplexere – animierte Kanban-Boards, Touch-Unterstützung oder barrierefreie Interaktionen – ist svelte-dnd-action die praktische Wahl. Beginnen Sie mit dem nativen Ansatz, um die Mechanik zu verstehen, und wechseln Sie dann zu einer Bibliothek, wenn Ihre Anforderungen dies erfordern.

Häufig gestellte Fragen

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.