Draggable (trascinare oggetti)

Sebbene spostare oggetti sia un'interazione particolarmente familiare, nel web essa comporta una serie di considerazioni complesse ed un non meno complesso codice JavaScript per garantire la compatibilità cross-browser.

jQuery UI risponde a questa esigenza anzitutto con il metodo .draggable() che, associato ad un elemento, lo rende trascinabile alla pressione del mouse:

$("#contenitore div").draggable();

Per permettere la personalizzazione grafica, a tutti gli elementi associati all'interazione, viene aggiunta la classe ui-draggable. In più, per permettere un feedback visivo durante il trascinamento, viene aggiunta anche la classe ui-draggable-dragging.

Opzioni

Naturalmente non tutto si risolve con il semplice metodo senza argomenti: un'interazione di questo tipo comporta la necessità di essere personalizzabile per aderire al meglio a diverse situazioni ed interfacce.

Questi i parametri principali che possono essere passati al metodo in un secondo argomento di tipo { chiave : valore} (e il valore di default):

• appendTo: (elemento, selettore - 'parent')
  L'elemento o il selettore CSS che sarà individuato come contenitore degli elementi draggabili (trascinabili), il valore di default "parent" indica che verrà usato l'elemento contenitore degli elementi.
• axis: (stringa - false)
  Limita il movimento sull'asse orizzontale ('x') o verticale ('y').
• cancel: (selettore - ':input,option')
  Previene l'interazione quando il cursore interagisce con gli elementi indicati nel selettore. Il valore di default, per esempio, evita che un'elemento sia mosso accidentalmente quando si sceglie un'opzione da un menu a tendina o si scrive in un campo form.
• connectToSortable: (selettore - false)
  Questa opzione può essere utile quando sono presenti elementi mobili indipendenti che vogliamo poter aggiungere ad una lista di elementi ordinabili (indicata dal selettore CSS). Come vedremo più avanti .sortables() è basato sul drag and drop, ma considera gli elementi mobili come una lista ordinata in cui ognuno occupa una posizione definita.
• containment: (selettore, elemento, array, stringa - false)
  Definisce il limite entro il quale gli elementi possono essere trascinati. Alcune opzioni sono: 'parent', 'document', 'window', [x1, y1, x2, y2].
• cursor: (stringa - 'auto')
  Specifica come deve apparire il cursore durante il trascinamento. In questo caso viene usato il valore CSS della regola cursor. Non esiste una vera e propria regola, in questo caso: c'è chi usa 'move' e chi 'pointer'. Personalmente preferisco quest'ultima opzione perché è più intuitiva per l'utente medio.
• delay: (intero - 0)
  Indica i millisecondi fra il momento in cui l'utente clicca con il mouse e l'inizio dell'interazione. Può essere utile per evitare click accidentali. Tuttavia un intervallo troppo lungo può essere interpretato come una lentezza dell'applicazione.
• distance: (intero - 1)
  Indica di quanti pixel dovrà muoversi il mouse (quando premuto) perché l'elemento inizi a seguirlo. Come nel caso precedente questa opzione può prevenire interazioni accidentali, tuttavia valori elevati renderanno gli elementi troppo appiccicosi e difficili da spostare.
• grid: (array - false)
  Lega il movimento dell'elemento mobile ad una griglia definita in pixel. Questa opzione è utile quando si ha la necessità di ordinare spazialmente più elementi, per esempio nel caso in cui volessimo rendere l'idea di una scacchiera.
  Il valore passato è un array con un valore per la larghezza ed uno per l'altezza di un blocco della griglia.
• handle: (elemento, selettore - false)
  Identifica un elemento da utilizzare come maniglia per il trascinamento. In questo modo l'interazione verrà avviata solo quando l'utente cliccherà e trascinerà quello specifico elemento, ma non in altre parti dell'elemento mobile.
• helper: (stringa, funzione - 'original')
  Permette l'utilizzo di elementi di aiuto. Se impostato su 'clone', ad esempio, verrà creato un clone dell'oggetto da trascinare e sarà spostato quest'ultimo invece dell'elemento originale fino al suo rilascio. In alcuni casi è possibile generare con una funzione un elemento DOM che funga da segnaposto per l'elemento (per esempio un piccolo box) in modo da limitare la complessità dell'elemento trascinato, aumentare le performance e semplificare l'interfaccia. Di default viene utilizzato direttamente l'elemento da trascinare.
• opacity: (decimale - false)
  Indica l'opacità che deve assumere l'elemento di aiuto. Può essere utile per indicare visivamente lo stato precario dell'elemento e per mostrare gli elementi a lui sottostanti.
• scope: (stringa - 'default')
  Viene utilizzato per raggruppare elementi trascinabili con aree di rilascio specifiche. In pratica serve a definire dei contenitori entro i quali poter rilasciare gli elementi.
• scroll: (booleano - true)
  Se impostato su true il contenitore dell'elemento trascinato scorrerà (scrolling) seguendo il movimento. Questa opzione è utile per facilitare l'interazione ad utenti con basse risoluzioni o schermi piccoli o in presenza di aree di trascinamento molto estese.
• snap: (booleano, selettore - false)
  Se impostato ad un selettore o su true, l'elemento trascinato si incollerà ad un elemento adiacente arrivato ad una certa distanza da questo.
• snapMode: (stringa - 'both')
  Definisce a quale limite degli elementi adiacenti si incollerà l'elemento trascinato. I valori possibili sono: 'inner', 'outer', 'both'.
• snapTolerance: (intero - 20)
  La distanza entro la quale si verifica lo snap. L'effetto per l'utente sarà quello di una calamita.

La lista completa delle opzioni è disponibile su questa pagina, mentre qui sono disponibili alcuni esempi.

Eventi associati

Oltre alle opzioni è possibile associare all'oggetto passato a .draggable() delle funzioni di callback in base agli eventi dell'interazione, questi sono:

• start (inizio del trascinamento)
• stop (fine dell'interazione)
• drag (durante il trscinamento)

Tutte le callback ricevono due argomenti: l'evento nativo del browser e un oggetto ui con le seguenti proprietà:

• ui.helper - l'oggetto jQuery dell'elemento trascinato
• ui.position - la posizione attuale dell'elemento trascinato del tipo {alto,sinistra}, relativamente all'elemento contenitore
• ui.offset - la posizione attuale dell'elemento trascinato del tipo {alto,sinistra}, relativamente alla pagina