La funzionalità di drag and drop (trascina e rilascia) è una delle interazioni più intuitive nelle interfacce grafiche. HTML5 ha standardizzato questa funzionalità con un’API nativa che permette di implementare il trascinamento di elementi direttamente nel browser, senza la necessità di librerie JavaScript esterne. Dalle liste riordinabili alle aree di caricamento file, il drag and drop arricchisce l’esperienza utente rendendo le interazioni più naturali e immediate.
L’Attributo draggable
Il punto di partenza per il drag and drop in HTML5 è l’attributo draggable. Questo attributo globale, applicabile a qualsiasi elemento HTML, indica se l’elemento può essere trascinato dall’utente. Accetta tre valori: “true” per rendere l’elemento trascinabile, “false” per impedirlo e “auto” (il valore predefinito) che lascia al browser il comportamento standard.
Per impostazione predefinita, solo le immagini, i link e il testo selezionato sono trascinabili senza alcuna configurazione aggiuntiva. Per rendere trascinabile qualsiasi altro elemento, è necessario aggiungere esplicitamente draggable=”true” nel markup HTML. È importante notare che rendere un elemento trascinabile è solo il primo passo: senza i gestori di eventi JavaScript appropriati, il trascinamento non avrà alcun effetto pratico.
Dal punto di vista visivo, quando un elemento viene trascinato, il browser crea automaticamente un’immagine fantasma (ghost image) che segue il cursore. Questa immagine è una copia semi-trasparente dell’elemento originale. È possibile personalizzare questa immagine fantasma tramite JavaScript utilizzando il metodo setDragImage() dell’oggetto DataTransfer, permettendo di mostrare un indicatore visivo personalizzato durante il trascinamento.
Gli Eventi di Drag and Drop
L’API Drag and Drop di HTML5 definisce sette eventi che coprono l’intero ciclo di vita di un’operazione di trascinamento. Comprendere quando ciascun evento viene generato e su quale elemento è fondamentale per un’implementazione corretta.
Gli eventi sull’elemento trascinato (drag source) sono tre: dragstart si attiva quando l’utente inizia a trascinare l’elemento (il momento in cui si preme il mouse e si inizia a muovere); drag si attiva continuamente durante il trascinamento, simile a mousemove; e dragend si attiva quando il trascinamento termina, indipendentemente dal fatto che il rilascio sia avvenuto su una zona valida o meno.
Gli eventi sulla zona di destinazione (drop target) sono quattro: dragenter si attiva quando l’elemento trascinato entra nell’area della zona di destinazione; dragover si attiva continuamente mentre l’elemento è sopra la zona di destinazione; dragleave si attiva quando l’elemento trascinato esce dalla zona di destinazione; e drop si attiva quando l’elemento viene rilasciato sulla zona di destinazione.
Un aspetto cruciale e spesso fonte di confusione: per permettere il rilascio su un elemento, è obbligatorio chiamare event.preventDefault() nel gestore dell’evento dragover. Il comportamento predefinito del browser, infatti, è di rifiutare qualsiasi operazione di drop. Senza preventDefault() nel dragover, l’evento drop non verrà mai generato, indipendentemente dalla configurazione degli altri eventi.
L’Oggetto DataTransfer
L’oggetto DataTransfer è il cuore del meccanismo di drag and drop, fungendo da contenitore per i dati trasferiti tra la sorgente e la destinazione. È accessibile tramite la proprietà dataTransfer dell’evento e fornisce metodi per leggere e scrivere dati durante le diverse fasi del trascinamento.
Il metodo setData(tipo, dati) viene chiamato nel gestore dragstart per associare dati all’operazione di trascinamento. Il parametro tipo è una stringa che identifica il formato dei dati, tipicamente “text/plain” per testo semplice, “text/html” per markup HTML, o “text/uri-list” per URL. È possibile impostare dati in più formati simultaneamente, permettendo alla zona di destinazione di scegliere il formato più appropriato.
Il metodo getData(tipo) viene chiamato nel gestore drop per leggere i dati associati all’operazione. Per ragioni di sicurezza, getData() è accessibile solo nei gestori drop e dragend; negli altri eventi restituisce una stringa vuota. Questa restrizione impedisce a elementi della pagina di “spiare” i dati durante il trascinamento.
La proprietà effectAllowed, impostata nel gestore dragstart, indica quali operazioni sono permesse: “copy”, “move”, “link”, “copyMove”, “copyLink”, “linkMove”, “all” o “none”. La proprietà dropEffect, impostata nel gestore dragover della zona di destinazione, specifica quale operazione verrà eseguita al rilascio. Il browser aggiorna l’icona del cursore in base a queste proprietà per dare un feedback visivo all’utente.
Esempi Pratici: Lista Riordinabile e Area Upload
Una lista riordinabile è uno degli esempi più classici di drag and drop. L’implementazione prevede di rendere ogni elemento della lista trascinabile, gestire gli eventi per determinare dove l’elemento viene rilasciato e riordinare il DOM di conseguenza. Nel gestore dragstart, si salva l’indice dell’elemento trascinato; nel gestore dragover di ogni elemento della lista, si chiama preventDefault() e si determina se l’elemento trascinato deve essere inserito prima o dopo l’elemento corrente; nel gestore drop, si esegue il riordinamento effettivo.
Per migliorare il feedback visivo durante il riordinamento, si possono aggiungere stili CSS tramite i gestori dragenter e dragleave: un bordo colorato o un’area evidenziata mostra all’utente dove l’elemento verrà posizionato al rilascio. È importante rimuovere gli stili nel gestore dragleave e nel gestore drop per evitare artefatti visivi.
Un’area di upload file è un altro caso d’uso molto diffuso. L’API Drag and Drop permette di trascinare file dal file system direttamente sulla pagina web. I file trascinati sono accessibili tramite la proprietà files dell’oggetto DataTransfer nel gestore drop. Ogni file è un oggetto File con proprietà come name, size, type e lastModified, che può essere inviato al server tramite FormData e Fetch API.
Per l’area di upload, il pattern tipico prevede di prevenire il comportamento predefinito sia in dragover che in drop (per evitare che il browser apra il file), aggiungere una classe CSS per evidenziare l’area quando un file viene trascinato sopra di essa, e processare i file al rilascio. Si possono validare i tipi e le dimensioni dei file prima dell’upload, mostrando messaggi di errore appropriati.
Stilizzazione degli Stati di Drag
Una buona implementazione di drag and drop richiede un feedback visivo chiaro che guidi l’utente durante l’interazione. CSS non offre pseudo-classi native per gli stati di drag, quindi la stilizzazione avviene tramite classi JavaScript aggiunte e rimosse nei gestori degli eventi.
Le best practice per la stilizzazione includono: ridurre l’opacità dell’elemento sorgente durante il trascinamento per indicare che è stato “sollevato” (applicando una classe nel gestore dragstart e rimuovendola nel gestore dragend); evidenziare la zona di destinazione quando un elemento vi entra sopra (usando dragenter/dragleave); mostrare indicatori di posizionamento per le liste riordinabili; e cambiare l’icona del cursore tramite la proprietà dropEffect.
Un problema comune con dragenter e dragleave è il fenomeno del “flickering”: quando l’elemento trascinato passa sopra gli elementi figli della zona di destinazione, dragleave viene generato per il genitore prima che dragenter venga generato nuovamente. La soluzione è utilizzare un contatore che incrementa su dragenter e decrementa su dragleave, applicando gli stili quando il contatore è maggiore di zero.
Accessibilità del Drag and Drop
L’accessibilità è l’aspetto più critico e spesso trascurato del drag and drop. L’interazione di trascinamento è intrinsecamente basata sul mouse e non è accessibile da tastiera senza implementazione aggiuntiva. Le linee guida WCAG richiedono che ogni funzionalità sia accessibile tramite tastiera.
Per rendere il drag and drop accessibile, è necessario fornire un’alternativa da tastiera. Per le liste riordinabili, pulsanti “sposta su” e “sposta giù” accessibili da tastiera offrono la stessa funzionalità. Per le aree di upload, un classico campo input di tipo file è il fallback standard. L’uso di attributi ARIA come aria-grabbed (deprecato ma ancora in uso) e aria-dropeffect fornisce informazioni aggiuntive alle tecnologie assistive.
Le live regions ARIA (aria-live) possono annunciare i cambiamenti di stato durante il trascinamento, informando gli utenti di screen reader su cosa sta accadendo. Ad esempio, annunciare “Elemento 3 spostato alla posizione 1” dopo un riordinamento. Per maggiori dettagli sulle tecniche ARIA, consulta la nostra guida sull’accessibilità web e ARIA.
Hai bisogno di aiuto con l’implementazione del drag and drop nel tuo progetto web? G Tech Group offre servizi di sviluppo web professionale e consulenza tecnica. Contattaci a su*****@********up.it o via WhatsApp al 0465 84 62 45.