Drag & Drop

Was ist Drag & Drop?

Drag & Drop (englisch drag and drop) ist ein Interaktionsmodell, bei dem ein Benutzer ein grafisches Element (z. B. ein Bild, eine Datei, ein Listeneintrag) per Maus‑ oder Touch‑Gesten „greift“, es über die Benutzeroberfläche bewegt und an einer definierten Ziel‑Zone „ablässt“. Der Vorgang löst in der Anwendung eine Aktion aus (z. B. Kopieren, Verschieben, Öffnen, Sortieren).

Kernkonzepte

Erweiterte Anwendungsfälle

Bibliotheken und Frameworks (zur Vereinfachung)

Barrierefreiheit (Accessibility)

• Keyboard‑Support: Ergänzen Sie Tastatur‑Shortcuts (z. B. Space zum Aufheben, Enter zum Ablegen) und ARIA‑Attribute (aria-grabbed, aria-dropeffect).
• Screen‑Reader‑Hinweise: Verwenden Sie aussagekräftige Beschreibungen (role="button" oder role="listitem").
• Kontrast & Fokus: Ziel‑Zonen sollten farblich hervorgehoben sein und einen klaren Fokus‑Indikator besitzen.

Sicherheitshinweise

• Validierung von Dateien: Beim Drop von Dateien immer MIME‑Typ und Größe prüfen, bevor sie hochgeladen werden.
• Cross‑Site‑Scripting (XSS): Benutzereingaben, die per Drag & Drop in den DOM eingefügt werden, vorher escapen.
• Same‑Origin‑Policy: Vermeiden Sie das Akzeptieren von Drag‑&‑Drop‑Daten von fremden Domains, wenn nicht ausdrücklich gewünscht.

Best‑Practice‑Checkliste

1. Visuelles Feedback – Ziel‑Zonen bei dragover farblich hervorheben.
2. Touch‑Support – Stellen Sie sicher, dass das Drag‑Verhalten auf Tablets/Smartphones funktioniert (Touch‑Events).
3. Fallback‑Lösung – Bieten Sie bei nicht unterstützten Browsern eine klassische Upload‑Schaltfläche an.
4. Performance – Vermeiden Sie teure DOM‑Manipulationen im drag‑Event (nur dragover & drop handeln).
5. Barrierefreiheit – ARIA‑Attribute, Tastatur‑Bedienbarkeit und klare Anweisungen.