Droppable (rilasciare oggetti trascinati)

L'interazione droppable è strettamente collegata a draggable e insieme concorrono al paradigma del drag'n'drop ormai molto diffuso sul web.

Sintetizzando il concetto, droppable realizza il contenitore in cui gli elementi trascinabili possono essere rilasciati.

In jQuery UI questa interazione è richiamata dal metodo .droppable():

$("#dropbox").droppable();

Opzioni

Le opzioni principali che possono essere passate a .droppable() (sempre attraverso un oggetto JavaScript) sono:

• accept: (selettore, funzione - '*')
  Indica quali elementi trascinabili sono accettati all'interno del contenitore. Può essere un selettore CSS del tipo "#lista div" oppure una funzione da applicare sull'elemento trascinato e che deve restituire true perché questo venga accettato. Di default ogni elemento può essere rilasciato nel contenitore.
• greedy: (booleano - false)
  Se impostato su true previene la propagazione dell'evento di rilascio agli elementi annidati nel contenitore. Questo significa che un elemento risulterà aggiunto al contenitore solo se rilasciato direttamente al suo interno, ma non all'interno di eventuali figli.
• scope: (stringa - 'default')
  Permette di accettare solo elementi trascinati che appartengono allo stesso scope (che viene impostato con la stessa modalità in draggable), in modo da poter filtrare gli elementi prima ancora di rilasciarli.
• tollerance: (stringa - 'intersect')
  Definisce quando un oggetto può essere rilasciato in modo che possa essere catturato dal contenitore. I valori possibili sono:
  • fit: tutto l'elemento trascinato è sopra al contenitore
  • intersect: almeno metà dell'elemento è sopra il contenitore
  • pointer: il mouse è nel contenitore
  • touch: appena l'elemento tocca il contenitore.

  Questa opzione è molto importante per quanto riguarda l'esperienza utente, in quanto da essa dipende l'usabilità dell'interazione. In realtà nessuna di esse è più indicata dell'altra, ma tutto dipende dalle dimensioni degli elementi trascinati e dalla distanza fra il punto di inizio e fine del trascinamento.
  Ad esempio, intersect è un buon compromesso solo nel caso in cui l'oggetto trascinato non sia troppo grande, mentre touch potrebbe attivare l'interazione troppo presto rendendo l'interfaccia imprecisa.

Eventi

Come per .draggable(), è possibile associare una funzione di callback ad alcuni eventi durante l'interazione. Tutte le funzioni accettano due argomenti: l'evento e un oggetti ui con le seguenti chiavi:

• .draggable - un oggetto jQuery del elemento che trascinato.
• .helper - l'helper dell'oggetto trascinato (che potrebbe essere l'oggetto stesso).
• .position - la posizione dell'helper in formato oggetto { top: , left: }.
• .offset - la posizione assoluta dell'helper in formato oggetto { top: , left: }.

Gli eventi a cui è possibile associare una funzione sono:

• activate / deactivate: questi eventi sono lanciati quando un elemento a cui è associato .draggable() viene trascinato o rilasciato. Può risultare utile per evidenziare l'area di rilascio solo quando un oggetto viene trascinato per mantenere più pulita l'interfaccia.
• over / out / drop: questi eventi segnano l'interazione fra l'elemento trascinato e l'area di rilascio, più precisamente quando l'elemento è dentro l'area (vedi l'opzione tollerance), ne esce oppure vi viene rilasciato.

Su questa pagina è possibile vedere alcuni esempi del metodo in azione.