Sommario
L'effetto trascina e rilascia Consiste nel prendere un elemento della pagina con un gesto del mouse, solitamente facendo clic su di esso e trascinando detto elemento in un'area dove può essere depositato, quindi a seconda della funzionalità della nostra pagina, si verificherà o meno un nuovo evento.In passato questo è stato realizzato utilizzando Librerie e framework Javascript stile jQuery, poiché il supporto HTML era limitato, tuttavia con HTML5, abbiamo queste funzionalità già incluse nel nostro browser.
Creazione degli elementi per il trascinamento
Nel documento HTML dobbiamo definire gli elementi che saranno in grado di utilizzare questo effetto, per questo abbiamo alcune proprietà che ci aiuteranno in questo scopo.
Quando si posiziona l'attributo trascinabile ad un elemento indichiamo al browser che questo elemento può o non può essere trascinato, per questo l'attributo ha i valori true, false e auto, come possiamo dedurre, true dice al browser che se deve essere un elemento che viene trascinato, false è altrimenti, disabilita l'effetto e auto dice al browser di prendere la decisione se attivare o meno l'effetto stesso.
Una buona pratica è usare true o false per indicare esplicitamente se l'effetto è attivato o meno, perché sebbene la maggior parte dei browser interpreti il valore auto come true, non dovremmo lasciare il corso della nostra pagina a terzi.
Eventi effetto trascinamento
Prima di passare all'esempio andiamo a definire un'altra importante caratteristica del trascinamento di un elemento, ovvero che quando si avvia il trascinamento di un elemento abbiamo 3 eventi che possiamo identificare e con i quali possiamo effettuare varie elaborazioni se vogliamo , questi eventi sono:
trascinamento, è l'inizio dell'evento di trascinamento che si verifica quando si posiziona il mouse sull'elemento, si fa clic e si inizia a trascinare l'elemento.
trascinare, accade dopo il dragstart e dura per tutto il modo in cui stiamo trascinando l'elemento.
trascinare, si verifica nel momento in cui smettiamo di trascinare l'oggetto, sia che lo lasciamo nell'area di deposito, sia che ci siamo pentiti e abbiamo smesso di trascinarlo a metà.
Implementazione del trascinamento
Vediamo di seguito un esempio di come incorporiamo tutto quanto sopra in una pagina, creeremo un elenco di elementi a cui assegneremo il attributo trascinabile come vero, creeremo alcune classi css che ci permetteranno di modificare i loro stili e infine con gli eventi menzionati quando facciamo il trascinamento di un elemento cambierà il suo colore.
Vediamo il codice:
Esempio
Deposita qui
Ora come appare nel nostro browser:
