Drag & Drop ist eine Interaktionstechnik, bei der Benutzer digitale Objekte durch Klicken, Festhalten und Ziehen per Maus oder Touch an eine andere Position verschieben oder an einem Zielbereich ablegen.
Was bedeutet das?
Drag & Drop (englisch: „ziehen und fallen lassen“) gehört zu den grundlegenden Interaktionsmustern grafischer Benutzeroberflächen. Im Web wurde es mit HTML5 standardisiert. Die HTML Drag and Drop API definiert ein Set von Events und Attributen: Das Attribut draggable="true" macht ein HTML-Element ziehbar. Beim Ziehen lösen die Events dragstart, drag und dragend aus; beim Ablegen über einem Zielelement dragover, dragenter, dragleave und drop. JavaScript-Bibliotheken wie SortableJS kapseln diese Low-Level-Events in eine einfachere API und ergänzen Touch-Unterstützung.
In WordPress ist Drag & Drop an mehreren Stellen eingebaut. Der Block-Editor (Gutenberg) nutzt Drag & Drop, um Blöcke innerhalb einer Seite neu anzuordnen: Ein Griff-Symbol links neben jedem Block erlaubt das vertikale Verschieben. Eine blaue Einrastlinie zeigt an, wo der Block abgelegt wird. Der Medien-Uploader nimmt Dateien per Drag & Drop aus dem Dateimanager des Betriebssystems entgegen und lädt sie direkt in die Mediathek hoch. Auf dem Dashboard-Startbildschirm lassen sich Widgets per Drag & Drop in ihrer Reihenfolge verändern. In den WordPress-Menüs können Einträge ebenfalls per Drag & Drop umsortiert und als Untermenüpunkte eingerückt werden.
Page-Builder wie Divi, Elementor oder WPBakery nutzen Drag & Drop als zentrales Interaktionsprinzip: Neue Inhaltsmodule werden aus einer Palette auf die Seite gezogen und dort positioniert. Das macht komplexe Layouts auch für Nutzer ohne Programmierkenntnisse zugänglich. Auf Touch-Geräten emulieren moderne Implementierungen Drag & Drop über Touch-Events (touchstart, touchmove, touchend) oder die neuere Pointer-Events-API, die Maus und Touch einheitlich behandelt.
Beispiel aus der Praxis
Sie überarbeiten einen langen WordPress-Beitrag mit zehn Blöcken und stellen fest, dass ein Bild-Block besser am Anfang stehen sollte. Statt den Block zu löschen und neu einzufügen, greifen Sie ihn am Griff-Symbol auf der linken Seite und ziehen ihn nach oben an die gewünschte Position. Die blaue Einrastlinie zwischen den Blöcken zeigt an, wo er landen wird. Nach dem Loslassen steht das Bild an der richtigen Stelle. Der Vorgang dauert wenige Sekunden und der gesamte Inhalt des Blocks bleibt unverändert erhalten.
Häufiger Fehler
Die native HTML5 Drag and Drop API funktioniert auf Touch-Geräten kaum, weil die Touch-Events nicht automatisch mit ihr verknüpft sind. Websites, die ausschließlich auf die HTML5 API setzen, bieten auf Smartphones und Tablets keine Drag-and-Drop-Funktionalität. Moderne Page-Builder und der WordPress-Block-Editor umgehen das, indem sie eine eigene Touch-Event-Implementierung verwenden und als Fallback Pfeiltasten zum Verschieben von Elementen bereitstellen. Falls Drag & Drop im Gutenberg-Editor unerwartet nicht funktioniert, ist häufig ein JavaScript-Konflikt mit einem anderen Plugin die Ursache; deaktivieren Sie Plugins nacheinander, um den Verursacher einzugrenzen.