ohne dnd-kit – mit der nativen HTML5 API
Externe DnD-Bibliotheken lösen Probleme, die in vielen Projekten gar nicht existieren – und bringen dafür Bundle-Größe, Lernaufwand und Abhängigkeiten mit. Die native HTML5 Drag and Drop API reicht für sortierbare Listen, Datei-Upload und einfache Drag-Interaktionen vollkommen aus – mit einem Custom Hook in unter 100 Zeilen TypeScript.
Inhaltsverzeichnis
- 1. Warum überhaupt nativ statt einer Bibliothek?
- 2. Die HTML5 Drag and Drop API erklärt
- 3. DnD-Events in React: Besonderheiten und Fallstricke
- 4. Sortierbare Liste: Schritt für Schritt
- 5. useSortable: DnD-Logik in einen Custom Hook
- 6. Datei-Upload mit Drag and Drop
- 7. Visuelles Feedback: Ghost, Overlay und Drop-Indikator
- 8. Touch-Support und mobile Einschränkungen
- 9. Nativ vs. dnd-kit: Wann welche