DragandDropFlächen

DragandDropFlächen bezeichnet Bereiche in einer grafischen Benutzeroberfläche, die als Zielzonen für Drag-and-Drop-Operationen dienen. Typische Beispiele sind Listen, Karten oder Upload-Zonen, in die Objekte von anderen Bereichen oder aus dem Betriebssystem verschoben werden können. Durch das Ziehen eines Elements über eine DragandDropFläche und das Absetzen an der Zielstelle lösen Benutzeraktionen wie Umordnen, Zuordnen oder Hochladen aus.

Technisch realisiert sich dies je nach Plattform unterschiedlich. Im Web wird die HTML5-Drag-and-Drop-API verwendet: Elemente, die gezogen werden sollen, erhalten das Attribut draggable="true" und lösen bei dragstart ein DataTransfer-Objekt aus. Drop-Ziele fangen dragover- und drop-Ereignisse, wobei default verhindert werden muss, um das Ablegen zu ermöglichen. Beim Drop wird das übertragene Item interpretiert und die entsprechende Aktion ausgelöst, z. B. Verschieben eines Listenelements oder Hochladen einer Datei.

Design und Barrierefreiheit: DragandDropFlächen sollten visuelles Feedback geben, wenn ein Item darüber schwebt (z. B. Hervorhebung, Farbumschlag) und klar sichtbare Drop-Ziele definieren. Nicht alle Benutzer können Drag-and-Drop einfach nutzen; daher sollten Alternativeingaben wie Buttons oder Kontextmenüs bereitgestellt werden. Zusätzlich sollten Drag-and-Drop-Interaktionen sinnvoll beschriftet und ARIA-Attribute verwendet werden, um Screenreadern die Semantik zu vermitteln.

Typische Einsatzszenarien umfassen das Umordnen von Elementen in einer Liste, das Zuweisen von Objekten zwischen Kategorien, das Hochladen von Dateien per Drag-and-Drop sowie das Verschieben von Elementen zwischen Bereichen in einer Anwendung.