Le tecniche di trascinamento di elementi del DOM in HTML5, conosciuta come tecnica Drag and Drop (D&D) permette di usare una API (Application Programming Interface) del linguaggio HTML5, grazie alla quale, con il mouse, è possibile spostare un qualsiasi elemento della pagina, da un punto ad un altro. A cosa può servire? Beh potresti creare delle pagine con dei semplici giochi, o creare delle pagine in cui tu possa cambiare al volo l'ordinamento di righe di una tabella.

Il trascinamento comporta un evento "mouse_down", seguito da un evento di spostamento del mouse, e il rilascio, viene attivato quando il puntatore del mouse viene sollevato. Attenzione che la specifica non definisce esattamente cosa sia un "trascinamento e rilascio" ma stabilisce che una volta attuata, una operazione di drag and drop deve avere un punto di partenza (click del mouse), un numero qualsiasi di fasi intermedie, e infine un punto finale in cui viene rilasciato il mouse o puntatore, altrimento tutta l'operazione viene annullata.

Il numero di browser che supportano tale API sta aumentando in conseguenza all'avvicinarsi del 2014 data in cui sembra verrà rilasciata la versione ufficiale dell'HTML5. IE 10.0, Firefox 18.0+, Chrome 24.0+, Safari 5.1+, Opera 12.1+ son alcuni di questi.

Ci sono un certo numero di eventi che possono essere collegati durante l'intera operazione di "Drag and Drop" di un elemento del DOM HTML5, e questi eventi vengono generati durante le varie fasi sopra menzionate. I sette eventi elencati dalla specifica vengono visualizzati nella tabella che segue:

Eventi dell'API

dragstart: Generato su un elemento quando un'operazione di trascinamento viene avviata. 

dragenter: Generato quando il mouse viene prima spostato su un elemento mentre un trascinamento è in corso. 

dragover: Questo evento viene generato quando il mouse viene spostato su un elemento mentre il trascinamento è in corso.

dragleave: Questo evento viene generato quando il mouse esce un elemento mentre un trascinamento è in corso.

drag: Questo evento viene generato all'elemento origine del trascinamento ossia all'elemento in cui si è verificato l'evento dragstart.

drop: L'evento viene generato sull'elemento su cui si è verificato il rilascio al termine dell'operazione di trascinamento.

dragend: L'evento viene generato sull'elemento su cui si è verificata la fine dell'operazione di trascinamento. 

Come usare questi eventi?

Beh è necessario avere un pò di dimestichezza con javascript, perchè si deve usare un oggetto "dataTransfer" il quale gestisce un pò il tutto. Ad esempio se nella nostra pagina abbiamo due immagini racchiuse nei relativi contenitori del modello box (vedi corso sui CSS e Dreamweaver)

Try to move the purple box into the pink box.
Dustbin

Drag Me

Seguimi su Google+