Attributo draggable ed evento dragstart

Qualsiasi elemento diventa una sorgente di trascinamento quando si imposta draggable="true". I link e le immagini sono trascinabili per impostazione predefinita; per tutto il resto (div, li, span) è necessario l'attributo esplicito. draggable="false" esclude un elemento dal trascinamento nativo.

Quando l'utente inizia un trascinamento, l'elemento sorgente genera dragstart. È il momento in cui inizializzare il trascinamento: registrare quale elemento si sta spostando, applicare eventualmente uno stile e scrivere nell'oggetto dataTransfer i dati che leggerà la destinazione.

Se contrassegna un elemento come trascinabile ma non gestisce mai dragstart, il browser trascina comunque un'immagine fantasma, ma non imposta alcun dato; per questo la maggior parte delle destinazioni rifiuta il rilascio. Abbini sempre l'attributo draggable a un listener dragstart che memorizzi almeno un identificatore.

e.dataTransfer.effectAllowed = "move" in dragstart limita l'operazione a: "copy", "move", "link", "copyMove", "all" oppure "none". Questo determina il cursore mostrato dal browser e il valore di dropEffect che la destinazione potrà impostare in seguito.

Aggiunga una classe CSS alla sorgente in modo che appaia attenuata durante il trascinamento: card.classList.add("dragging"). Rimuova la classe nell'evento dragend, così lo stile viene eliminato sia quando il rilascio riesce sia quando viene annullato con Escape.

Per impostazione predefinita, il browser trascina un'istantanea traslucida della sorgente. La sostituisca con e.dataTransfer.setDragImage(node, offsetX, offsetY): passi un elemento DOM nascosto o un oggetto Image per visualizzare un'anteprima personalizzata sotto il cursore.

dragend si attiva sulla sorgente al termine del trascinamento, sia che il rilascio abbia avuto successo, sia che sia avvenuto su una destinazione non valida o che sia stato annullato. Lo utilizzi per le operazioni di pulizia: rimuovere la classe dragging, nascondere le anteprime fantasma e ripristinare l'opacità.

All'interno di dragend, controlli e.dataTransfer.dropEffect. Se il valore è "none", il rilascio non è avvenuto (la destinazione lo ha rifiutato, l'utente ha premuto Escape oppure ha rilasciato il pulsante fuori dalla pagina). Altrimenti corrisponde all'effetto scelto dalla destinazione ("move", "copy", "link").

Il trascinamento nativo è pensato innanzitutto per i computer desktop. Sui dispositivi touch l'API funziona a malapena senza un polyfill o un'alternativa basata su Pointer Events. Per interfacce di riordinamento adatte ai dispositivi mobili, preferisca librerie come SortableJS o dnd-kit, che astraggono entrambe le modalità di gestione degli eventi.

Il trascinamento nativo non è accessibile da tastiera: gli utenti che usano solo la tastiera non possono riordinare gli elementi. Fornisca sempre un'alternativa: gestori dei tasti freccia, pulsanti per spostare in alto o in basso oppure una finestra di dialogo per il riordinamento controllata tramite aria. Il trascinamento deve migliorare l'esperienza, non sostituirla.

La selezione del testo all'interno degli elementi trascinabili può interferire con il trascinamento. Applichi il CSS user-select: none e -webkit-user-drag: element alla sorgente, così il browser trascina l'elemento invece di selezionare il testo al suo interno.

Perché di solito è necessario associare un listener dragstart anche se il solo attributo draggable="true" rende un elemento trascinabile?

Contrassegni le sorgenti con draggable="true" e utilizzi dragstart per popolare dataTransfer, impostare effectAllowed e, facoltativamente, un'immagine di trascinamento personalizzata. Lo abbini a dragend per ripulire gli stili. Fornisca alternative da tastiera per l'accessibilità e consideri i polyfill per il touch.