jQuery UI Sortable, então escreva a ordem em um banco de dados

A interface do usuário do jQuery sortable o recurso inclui um serialize método para fazer isso. É bem simples, realmente. Aqui está um exemplo rápido que envia os dados para a URL especificada assim que um elemento muda de posição.

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

O que isso faz é criar uma matriz dos elementos usando os elementos id . Então, eu costumo fazer algo assim:

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

Quando você usa o serialize opção, ele criará uma string de consulta POST como esta:item[]=1&item[]=2 etc. Então, se você usar - por exemplo - seus IDs de banco de dados no id atributo, você pode simplesmente iterar através do array POSTed e atualizar as posições dos elementos de acordo.

Por exemplo, em PHP:

$i = 0;

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

Exemplo no jsFiddle.