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.