TL; DR – L’API Drag and Drop HTML5 ti consente di prendi un oggetto HTML con il cursore e trascinalo in un altro posto.
Cosa puoi trascinare e rilasciare in HTML5?
HTML5 ti permette di rendere trascinabile qualsiasi elemento, permettendoti di prenderlo con il cursore e trascinarlo in una posizione diversa definita come elemento trascinabile. Nell’esempio seguente, prova a trascinare un’immagine in un quadrato:
Questa funzionalità semplifica l’esperienza dell’utente e consente anche di creare semplici giochi online (ad esempio, puoi trascinare e rilasciare pezzi degli scacchi virtuali). Quando trascini un elemento, la sua replica trasparente si sposta insieme al cursore finché non lo rilasci rilasciando il pulsante del mouse.
Tecnicamente, Drag and Drop è un’API JavaScript aggiunta a HTML5. Pertanto, è importante avere almeno una conoscenza di base dello scripting per poter lavorare con questa funzionalità.
Eventi per il trascinamento e rilascio HTML5
Nella tabella seguente, vedrai tutti gli eventi rilevanti per la funzionalità Drag and Drop:
| Evento | Spiegazione |
|---|---|
| trascina | Il cursore si sposta durante il trascinamento di un elemento |
| rilascio | Il processo di trascinamento termina |
| dragstart | Il cursore prende l’elemento e inizia a trascinare |
| dragend | Il pulsante del mouse viene rilasciato, rilasciando l’elemento |
| dragenter | Il cursore entra nell’elemento di destinazione |
| dragleave | Il cursore lascia l’elemento di destinazione |
| dragover | Il cursore si sposta sull’elemento di destinazione |
Spiegazione passo passo del drag and drop
Il codice HTML5 drag and drop sembra piuttosto complicato a prima vista in quanto include lo scripting in JS. Tuttavia, studiamo ogni parte del processo per renderlo più facile da capire.
Elementi trascinabili
Innanzitutto, devi assicurarti che l’elemento che desideri trascinare abbia un Attributo HTML5 draggable applicato e relativo valore impostato su true:
Trascinamento
Quindi, definisci cosa dovrebbe accadere dopo aver trascinato un oggetto. Puoi farlo chiamando un gestore di eventi per un evento dragstart e che definisce una funzione da eseguire.
Il valore e il tipo di dati dei dati trascinati devono essere impostati dal dataTransfer.setData() metodo:
Dropping
I dati trascinabili HTML5 vengono specificati allegando un gestore di eventi all’evento dragover.
Elementi e dati non possono essere inserito in altri elementi per impostazione predefinita. Ciò significa che devi arrestare gli elementi “s comportamento predefinito utilizzando il metodo event.preventDefault():
Un evento drop si verifica quando i dati trascinabili HTML5 vengono rilasciati. Viene chiamato dal gestore di eventi ondrop:
The Final Code: an Example
Fondamentalmente, hai bisogno del tuo codice per essere in grado di eseguire quattro passaggi:
- Impedisci l’azione predefinita del browser web relativa ai dati chiamando
preventDefault() - Ottieni i dati con il
dataTransfer.getData()metodo - Applica l’elemento trascinato sull’elemento di rilascio
Vediamo come funziona nel esempio di seguito:
Drag and Drop HTML5: suggerimenti utili
- Puoi trascinare vari tipi di elementi, inclusi ma non limitati a file, link, immagini e testo.
- Puoi anche trascinare più elementi contemporaneamente. Tuttavia, si consiglia di averli tutti nello stesso formato per coerenza.
- Gli elementi del modulo che accettano l’input dell’utente possono essere aree trascinabili per impostazione predefinita.