jQuery UI Sortable, pak zapište pořadí do databáze

Uživatelské rozhraní jQuery sortable funkce zahrnuje serialize metoda udělat toto. Je to docela jednoduché, opravdu. Zde je rychlý příklad, který odešle data na zadanou adresu URL, jakmile prvek změní polohu.

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

To dělá to, že vytváří pole prvků pomocí prvků id . Takže obvykle dělám něco takového:

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

Když použijete serialize možnost, vytvoří řetězec dotazu POST takto:item[]=1&item[]=2 atd. Pokud tedy použijete - například - ID vaší databáze v id atribut, pak můžete jednoduše iterovat pole POSTed a podle toho aktualizovat pozice prvků.

Například v PHP:

$i = 0;

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

Příklad na jsFiddle.