torna alle lezioni

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 document per il mousedown.
  • 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.

Demo in una nuova finesta

Apri una sandbox per l'esercizio.

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.

Apri la soluzione in una sandbox.