jQuery UI: sortable list

jQuery UI, ormai giunto alla versione 1.9, mette a disposizione tutto quello che serve per gestire con semplictà liste ordinabili tramite drag&drop, vediamo come.
Per prima cosa serve collegare nella nostra pagina sia jQuery sia jQuery UI sia il tema scelto:

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

Poi in secondo luogo prepariamo l’html:

una comunissima lista e integriamo il css del tema:

<ul id="mialista">
<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>
<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>

A questo punto al document.ready rendiamo i nostri elementi li trascinabili:

$(document).ready(function(e) {
$(‘#mialista’).sortable({…})
})

Aggiungiamo l’evento stop in mdo da mandare una chiamata via ajax al web server per memorizzare la sequenza attualmente visibile sulla pagina,
quindi come prima cosa leggiamo l’ordine:

var ordine=$(‘#mialista’).sortable(‘serialize’);

e successivamente mandiamo la chiamata:


$.get(‘data/inserisci.php?’+ordine,function(data){/*fai qualcosa*/})

la function di risposta viene utilizzata per esempio per dare conferma dell’avvenuto salvataggio,
anche se a volte potrebbe essere un po’ troppo invadente.

Per completezza la insersci php:

if(isset($_GET['lista'])){     print_r($_GET['lista']);     }

L’esempio