jQuery UI Sortable, luego escriba el orden en una base de datos

La interfaz de usuario de jQuery sortable la función incluye un serialize método para hacer esto. Es bastante simple, de verdad. Aquí hay un ejemplo rápido que envía los datos a la URL especificada tan pronto como un elemento cambia de posición.

$('#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'
        });
    }
});

Lo que esto hace es que crea una matriz de elementos usando los elementos id . Por lo tanto, normalmente hago algo como esto:

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

Cuando usa el serialize opción, creará una cadena de consulta POST como esta:item[]=1&item[]=2 etc. Entonces, si usa, por ejemplo, sus ID de base de datos en el id atributo, puede simplemente iterar a través de la matriz POST y actualizar las posiciones de los elementos en consecuencia.

Por ejemplo, en PHP:

$i = 0;

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

Ejemplo en jsFiddle.