⚡Vibe Coding

Drag & Drop Interfaces

Ziehen und Ablegen wie Trello

Drag and Drop macht Interfaces intuitiv. Aufgaben zwischen Spalten verschieben, Listen sortieren, Dateien hochladen. Mit dnd-kit baust du das in React sauber und performant.

Pro-Tip — Der schnelle Weg
Nutze dnd-kit statt react-beautiful-dnd. Es ist moderner, aktiv maintained und hat bessere Touch-Unterstuetzung fuer Mobile.
Seite 1
1

dnd-kit installieren

Installiere das Core-Paket und die Sortable-Erweiterung. Das reicht fuer die meisten Drag and Drop Szenarien.

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
2

Sortierbare Liste bauen

Wickle deine Liste in DndContext und SortableContext. Jedes Item bekommt useSortable fuer die Drag-Funktionalitaet.

import { DndContext, closestCenter } from '@dnd-kit/core'
import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable'
import { CSS } from '@dnd-kit/utilities'


function SortableItem({ id, children }) {
 const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id })
 const style = { transform: CSS.Transform.toString(transform), transition }
 return (
 <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
 {children}
 </div>
 )
}
3

DndContext mit Handler

Der onDragEnd Handler aktualisiert die Reihenfolge wenn ein Item abgelegt wird. Nutze arrayMove aus dem Sortable-Paket.

import { arrayMove } from '@dnd-kit/sortable'


function handleDragEnd(event) {
 const { active, over } = event
 if (active.id !== over?.id) {
 setItems(items => {
 const oldIndex = items.indexOf(active.id)
 const newIndex = items.indexOf(over.id)
 return arrayMove(items, oldIndex, newIndex)
 })
 }
}
4

Kanban Board bauen

Fuer ein Kanban Board brauchst du mehrere Droppable-Bereiche. Items koennen zwischen Spalten verschoben werden. Nutze den DragOverlay fuer eine schoene Drag-Vorschau.

5

Reihenfolge speichern

Speichere die neue Reihenfolge in der Datenbank. Nutze ein 'order' Feld oder Fractional Indexing fuer effizientes Umordnen ohne alle Positionen zu aktualisieren.

async function handleDragEnd(event) {
 // ... arrayMove ...
 await supabase
 .from('tasks')
 .update({ order: newIndex })
 .eq('id', active.id)
}
Seite 2
Warum das funktioniert
  • Drag and Drop ist die intuitivste Interaktion fuer Sortierung
  • dnd-kit ist framework-agnostisch und funktioniert mit jedem UI-System
  • Eingebaute Touch-Sensoren machen Mobile-Support automatisch
  • DragOverlay gibt visuelles Feedback das Nutzer erwarten
Tipps
  • DragOverlay zeigt eine Vorschau des gezogenen Elements, nutze es immer
  • Touch-Support testen, dnd-kit hat eingebaute Touch-Sensoren
  • KeyboardSensor hinzufuegen fuer Barrierefreiheit
  • Fractional Indexing spart Datenbank-Updates bei haeufigem Umordnen
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen