Drag & Drop in HTML
Drag-and-Drop-Operationen ermöglichen es Nutzern, HTML-Elemente auf der Seite zu verschieben. Dies wird nativ von HTML5 mit JavaScript unterstützt.
Grundlegende Funktionalität
Um ein Element ziehbar zu machen, fügen Sie das Attribut 'draggable="true"' hinzu. Das Zielobjekt muss Event-Handler für 'dragover' und 'drop' enthalten.
Ereignisse
Für Drag & Drop müssen mehrere Ereignisse behandelt werden: - dragstart: wenn das Ziehen beginnt - dragover: wenn sich das Objekt über dem Ziel befindet - drop: wenn es abgelegt wird - dragend: wenn das Ziehen endet - dragenter / dragleave: Betreten/Verlassen eines Ziels
Datenübertragung
Verwenden Sie das Objekt 'dataTransfer', um Informationen über das gezogene Element zu übermitteln. Mit setData und getData lassen sich z. B. IDs oder andere Daten übertragen.
Praktische Tipps
Drag & Drop eignet sich für Datei-Uploads, Sortierfunktionen oder visuelle Editoren. Geben Sie stets visuelles Feedback, z. B. durch Stiländerungen, wenn ein Element gezogen werden kann oder ein Ziel erreicht.
✨ Frag Lara — deine KI-Lernpartnerin
Entsperre personalisierte Lernunterstützung. Lara kann Lektionen erklären, Themen zusammenfassen und deine Lernfragen beantworten — verfügbar ab dem Go-Tarif.
Lara hilft dir, schneller zu lernen — exklusiv für ReadyTools Go-, Plus- und Max-Mitglieder.
