Selezionare e deselezionare elementi di una lista con jQuery UI Selectable

Selezioniamo continuamente elementi durante la nostra navigazione in rete e spesso nasce l'esigenza di associare una funzione al momento in cui avviene una selezione (o deselezione). Il metodo "selectable" della libreria jQuery UI ci viene incontro ed assegnandolo ad un elemento del DOM, sia esso una lista, una tabella o qualsiasi altro elemento, questo assumerà la capacità di essere selezionabile con un semplice click del mouse, potendolo così recuperare per operazioni successive.

Per prima cosa la nostra pagina dovrà inludere le librerie jQuery e jQuery UI tra i tag script nell'head (quelle elencate di seguito assicurano il corretto funzionamento del codice di esempio):

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js

E' necessario creare un elemento a cui associare la funzionalità, nel caso specifico una lista non ordinata:

<ul id="selezionabile" class="ui-widget">
    <li class="ui-widget-content ui-corner-all">Elemento 1</li>
    <li class="ui-widget-content ui-corner-all">Elemento 2</li>
    <li class="ui-widget-content ui-corner-all">Elemento 3</li>
    <li class="ui-widget-content ui-corner-all">Elemento 4</li>
    <li class="ui-widget-content ui-corner-all">Elemento 5</li>
    <li class="ui-widget-content ui-corner-all">Elemento 6</li>
    <li class="ui-widget-content ui-corner-all">Elemento 7</li>
</ul>

Un minimo di CSS::

ul {margin: 0; padding: 0; list-style-type: none; width: 50%;}
ul li {padding: 0.4em; margin: 0.2em; cursor: pointer; font-size: 0.8em;}

Ed infine il fulcro della questione, l'assegnazione del metodo all'elemento. Nel codice di esempio faccio uso di 2 eventi relativi al widget "selectable", nello specifico selected e unselected, che gestiscono funzioni rispettivamente nel momento in cui si seleziona e si deseleziona un elemento. In questo caso faccio in modo che quando un elemento viene selezionato si deselezionano automaticamente gli altri (rimuovere la funzione associata ad unselected per evitare questo comportamento), inoltre quando si clicca su un elemento già selezionato lo stesso si deselezionerà :

$( "#selezionabile" ).selectable({
    selected: function( e, ui ) {
        if ($( ui.selected ).hasClass( "ui-state-highlight" )) {
            $( ui.selected ).removeClass( "ui-state-highlight" );
        } else {
            $( ui.selected ).addClass( "ui-state-highlight" );
        }
    },    
    unselected: function( e, ui ) {
        $( ui.unselected ).removeClass( "ui-state-highlight" );    
    }
});

Potete vedere il codice in funzione nell'esempio che ho creato su JSFiddle e che potete testare direttamente nel codice seguente all'interno del tab "Result":

Per un approfondimento sulle opzioni, metodi ed eventi utilizzabili rimando alla documentazione ufficiale del widget draggable sul sito di jQueryUI.