Trascina i supereroi nel campo
importanza: 5
Questa attività può essere d’aiuto per comprendere vari aspetti del Drag’n’Drop e del DOM.
Rendete tutti gli elementi trascinabili, attraverso la classe draggable, come il pallone nel capitolo appena studiato.
Requisiti:
- Utilizzare la event delegation per tenere traccia dell’inizio del trascinamento: un solo gestore evento sul
documentper ilmousedown. - Se gli elementi vengono trascinati verso i bordi in alto o in basso, la pagina deve scrollare di conseguenza.
- Lo scroll in orizzontale non è previsto, (il che rende l’attività più semplice, aggiungerlo è facile).
- Gli elementi trascinabili o le loro parti non devono mai uscire fuori dalla finestra, anche dopo movimenti veloci.
La demo è troppo grande per essere inclusa qui, quindi ecco il link.
Per trascinare l’elemento possiamo usare position:fixed, il quale semplifica la gestione delle coordinate. Alla fine dovremmo tornare ad utilizzare position:absolute per posizionare l’elemento all’interno del document.
Se le coordinate sono in alto/basso rispetto alla finestra, useremo window.scrollTo per scrollare la pagina fino al punto desiderato.
Maggiori informazioni nel codice, tra i commenti.