jQuery UI Ordinabile, quindi scrivi l'ordine in un database

L'interfaccia utente jQuery sortable la funzione include un serialize metodo per farlo. È abbastanza semplice, davvero. Ecco un rapido esempio che invia i dati all'URL specificato non appena un elemento cambia posizione.

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // POST to server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

Ciò che fa è creare un array di elementi usando gli elementi id . Quindi, di solito faccio qualcosa del genere:

<ul id="sortable">
   <li id="item-1"></li>
   <li id="item-2"></li>
   ...
</ul>

Quando usi serialize opzione, creerà una stringa di query POST come questa:item[]=1&item[]=2 ecc. Quindi se usi, ad esempio, gli ID del tuo database nel id attributo, puoi quindi semplicemente scorrere l'array POSTed e aggiornare di conseguenza le posizioni degli elementi.

Ad esempio, in PHP:

$i = 0;

foreach ($_POST['item'] as $value) {
    // Execute statement:
    // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
    $i++;
}

Esempio su jsFiddle.