JavaScript  »  Guide  »  Guida jQuery UI 

L'ultima interazione di jQuery UI che affrontiamo è .sortable() e nasce dall'unione di più interazioni delle quali condivide molte opzioni: .draggable() e .droppable().

La caratteristica aggiuntiva del metodo rispetto alle interazioni che lo compongono è che gli elementi non vengono solo trascinati e rilasciati, ma vanno a creare un insieme ordinato ricavabile tramite un metodo specifico. In questo modo è possibile offrire all'utente un sistema intuitivo e diretto per ordinare liste di vario genere al posto di metodi più tradizionali come select e campi di testo numerici (esempio).

Configurazione

Come per le altre interazioni, anche .sortable() ha alcune interessanti opzioni di personalizzazione.

Anzitutto condivide opzioni presenti in .draggable(), come axis (per specificare l'asse secondo cui è possibile trascinare un elemento), delay e distance per controllare quando l'interazione fra il mouse e gli elementi deve iniziare, oppure grid per costringere gli spostamenti secondo una griglia in pixel.

Il metodo ha anche opzioni proprie, più specifiche per la personalizzazione dell'ordinamento degli elementi:

• connectWith : (selettore - false)
  Connette gli elementi ordinabili ad un'altra lista ordinabile, in modo che possano essere trascinati dall'una all'altra.

  $('.lista').sortable({ connectWith: '.altralista' });

• dropOnEmpty : (booleano - false)
  Se impostato su false gli elementi della lista non possono essere rilasciati in una lista collegata (con connectWith) se quest'ultima è al momento vuota.

Ecco alcuni esempi di personalizzazione.

Eventi

Gli eventi associati all'interazione, e ai quali possiamo collegare una funzione di callback, sono:

• start / sort / stop: lanciato all'inizio, durante ed alla fine dell'interazione.
• change: lanciato durante l'ordinamento, ma sono quando la posizione dell'elemento trascinato è cambiata.
• beforeStop: lanciato quando l'ordinamento è finito ma l'helper (impostato con l'opzione helper) è ancora disponibile.
• update: lanciato quando l'utente rilascia un elemento e la sua posizione è cambiata.
• receive: lanciato quando una lista connessa (con connectWith) riceve un elemento dalla lista corrente.
• remove: lanciato quando un elemento è rimosso da una lista per essere inserito in una collegata.
• over / out: lanciato quando un'elemento viene spostato su una lista collegata o ne esce.
• activate / deactivate: lanciato su tutte le liste collegate quando ha inizio l'interazione sulla lista principale.

Tutti gli eventi prevedono due argomenti: l'evento nativo del browser ed un oggetto ui con le seguenti proprietà:

• .helper: l'helpercorrente.
• .position: posizione dell'helper.
• .offset: posizione assoluta dell'helper.
• .item: l'elemento trascinato corrente.
• .placeholder: il segnaposto se definito.
• .sender: la lista di provenienza, solo nel caso in cui ci siano liste collegate a quella principale.

Metodi specifici

Come per le altre interazioni, anche .sortable() supporta dei metodi generici per inizializzare o rimuovere l'interazione, oppure per cambiare alcune opzioni su un'interazione preesistente:

//Inizializza la lista con le opzioni di default
$("#lista1").sortable(); 
//Personalizza un'opzione specifica
$("#lista1").sortable("option","connectWith","#lista2");

Oltre a questi metodi, comuni a tutte le interazioni, .sortable() ne offre altri utili per gestire l'ordinamento degli elementi nella lista:

• cancel: cancella l'ultimo cambiamento avvenuto nella lista.
  È utile per permettere all'utente di tornare sui propri passi, oppure associato agli eventi stop e receive per rimediare ad eventuali ordinamenti errati:

        $("#lista1").sortable({
      stop : function (event,ui) {
          if (ui.item.is(".bloccato")) {
              // this si riferisce alla lista
              $(this).sortable("cancel"); 
          }
      }
  });
  

• refresh: aggiorna gli elementi della lista, aggiungendo quelli non presenti al momento dell'inizializzazione dell'interazione (aggiunti, per esempio, con AJAX).

• serialize: serializza gli id degli elementi ordinati, restituendo una stringa inviabile via AJAX o attraverso un form. La struttura degli id da assegnare agli elementi della lista segue una regola generale del tipo nomevariable_valore, quindi una lista del tipo:

      <ul id="lista">
      <li id="lista_1">Uno</li>
      <li id="lista_3">Tre</li>
      <li id="lista_2">Due</li>
  </ul>
  

  Sarà serializzata nella stringa:

  "lista[]=1&lista[]=2&lista[]=3"

• toArray: raccoglie gli id degli elementi nella lista e li restituisce sotto forma di array JavaScript. Riprendendo la lista dell'esempio precedente:
  

      var lista = $("#lista").sortable("toArray");
  //restituisce 
  // lista[0] = "lista_1"
  // lista[1] = "lista_3"
  // lista[2] = "lista_2"
  

Per quanto riguarda il metodo serialize, è possibile modificare il comportamento di default passando un secondo argomento sotto forma di oggetto JavaScript contenente una o più delle seguenti opzioni:

• key: indica una stringa da sostituire alla prima parte dell'id (corrispondente al nome della variabile)
• attribute: indica un attributo valido dell'elemento da utilizzare al posto di id
• expression: filtra il valore di id (o dell'attributo specificato con attribute) con un'espressione regolare per estrarne il valore da inserire nella stringa finale.

Altri articoli

Altre guide

Altre newsletter