draggable-Attribut und dragstart-Ereignis

Jedes Element wird zu einer Drag-Quelle, wenn Sie draggable="true" setzen. Links und Bilder können standardmäßig gezogen werden; für alle anderen Elemente (divs, lis, spans) ist das explizite Attribut erforderlich. Mit draggable="false" schließen Sie ein Element vom nativen Ziehen aus.

Wenn der Benutzer einen Drag-Vorgang beginnt, löst das Quellenelement dragstart aus. Hier initialisieren Sie den Drag-Vorgang: Halten Sie fest, welches Element bewegt wird, formatieren Sie es bei Bedarf und schreiben Sie Daten in das dataTransfer-Objekt, die das Drop-Ziel lesen wird.

Wenn Sie ein Element als draggable markieren, aber dragstart nie behandeln, zieht der Browser zwar weiterhin ein Geisterbild, doch es werden keine Daten gesetzt. Deshalb lehnen die meisten Drop-Ziele den Drop ab. Kombinieren Sie ein draggable-Attribut immer mit einem dragstart-Listener, der mindestens eine Kennung speichert.

e.dataTransfer.effectAllowed = "move" in dragstart schränkt den Vorgang ein: "copy", "move", "link", "copyMove", "all" oder "none". Dies bestimmt den Cursor, den der Browser anzeigt, sowie den dropEffect, den das Ziel später setzen darf.

Fügen Sie der Quelle eine CSS-Klasse hinzu, damit sie während des Ziehens abgeblendet erscheint: card.classList.add("dragging"). Entfernen Sie die Klasse im dragend-Ereignis, damit die Formatierung sowohl nach einem erfolgreichen Drop als auch nach einem Abbruch mit Escape zurückgesetzt wird.

Standardmäßig zieht der Browser eine durchscheinende Momentaufnahme der Quelle. Überschreiben Sie dieses Verhalten mit e.dataTransfer.setDragImage(node, offsetX, offsetY) – übergeben Sie ein ausgeblendetes DOM-Element oder ein Image, um eine benutzerdefinierte Vorschau am Cursor anzuzeigen.

dragend wird nach Abschluss des Drag-Vorgangs an der Quelle ausgelöst – unabhängig davon, ob der Drop erfolgreich war, auf einem ungültigen Ziel erfolgte oder abgebrochen wurde. Verwenden Sie es für Aufräumarbeiten: Entfernen Sie die dragging-Klasse, blenden Sie Geistervorschauen aus und stellen Sie die Deckkraft wieder her.

Prüfen Sie innerhalb von dragend e.dataTransfer.dropEffect. Wenn der Wert "none" lautet, hat der Drop nicht stattgefunden (das Ziel hat ihn abgelehnt, der Benutzer hat Escape gedrückt oder außerhalb der Seite abgelegt). Andernfalls entspricht er dem vom Drop-Ziel gewählten Effekt ("move", "copy", "link").

Native Drag-and-Drop-Funktionen sind primär für Desktop-Systeme ausgelegt. Auf Touch-Geräten funktioniert die API ohne ein Polyfill oder einen auf Pointer Events basierenden Ersatz kaum. Für mobilfreundliche Oberflächen zum Neuanordnen eignen sich Bibliotheken wie SortableJS oder dnd-kit, die beide Ereignismodelle abstrahieren.

Native Drag-and-Drop-Funktionen sind nicht per Tastatur zugänglich – Benutzer, die ausschließlich die Tastatur verwenden, können Elemente nicht neu anordnen. Bieten Sie immer eine Alternative an: Handler für Pfeiltasten, Schaltflächen zum Verschieben nach oben oder unten oder einen über ARIA gesteuerten Dialog zum Neuanordnen. Drag-and-Drop sollte die Bedienung verbessern, nicht ersetzen.

Die Textauswahl innerhalb ziehbarer Elemente kann den Drag-Vorgang stören. Wenden Sie auf die Quelle das CSS user-select: none und -webkit-user-drag: element an, damit der Browser das Element zieht, statt den darin enthaltenen Text auszuwählen.

Warum müssen Sie normalerweise einen dragstart-Listener hinzufügen, obwohl das Attribut draggable="true" allein ein Element ziehbar macht?

Markieren Sie Quellen mit draggable="true" und verwenden Sie dragstart, um dataTransfer zu befüllen, effectAllowed zu setzen und optional ein benutzerdefiniertes Drag-Bild festzulegen. Kombinieren Sie dies mit dragend, um Formatierungen aufzuräumen. Bieten Sie aus Gründen der Barrierefreiheit Tastaturalternativen an und ziehen Sie für Touch-Geräte Polyfills in Betracht.