jQuery connect sortable list

Oltre che ordinare una lista con il drag&drop e salvare sul nostro server la nuova sequenza,

possiamo far eun’operazione analoga con due liste collegate fra di loro,

L’html dovrebbe risultare abbastanza intuitivo:

<ul id=”mialista_1″>
<li id=”lista_1″>Lista 1</li>
<li id=”lista_2″>Lista 2</li>
<li id=”lista_3″>Lista 3</li>
<li id=”lista_4″>Lista 4</li>
<li id=”lista_5″>Lista 5</li>
</ul>
<ul id=”mialista_2″>
<li id=”lista_6″>Lista 6</li>
<li id=”lista_7″>Lista 7</li>
<li id=”lista_8″>Lista 8</li>
<li id=”lista_9″>Lista 9</li>
</ul>

due liste sostanzialmente identiche formattate con un css:

#mialista_1{ margin:0; padding:0; list-style-type:none; width:150px; float:left; background-color:#09F;}
#mialista_1 li{ padding:5px; margin:5px;}
#mialista_2{ margin:0; padding:0; list-style-type:none; width:150px; float:left; background-color:#FC3; min-height:100px;}
#mialista_2 li{ padding:5px; margin:5px;}

è raccomandabile usare min-height per evitare che una lista, una volta svuotata, non possa più accogliere elementi.

Al document.ready creiamo due elementi sortable:

$(‘#mialista_1, #mialista_2′).sortable()

e soprattutto specifichiamo la possibilità di passare elementi da una lista all’altra:

connectWith:’.mialista’

all’evento stop, mandiamo al server, in modo molto schematico,

le nostre due liste:

var ordine1=$(‘#mialista_1′).sortable(‘serialize’);
var ordine2=$(‘#mialista_2′).sortable(‘serialize’);
$.get(‘data/inserisci2.php?’+ordine1,function(data){})
$.get(‘data/inserisci2.php?’+ordine2,function(data){})

Qui l’esempio