jQuery UI Sorterbart, skriv sedan ordning i en databas

JQuery-gränssnittet sortable funktionen inkluderar en serialize metod att göra detta. Det är ganska enkelt, egentligen. Här är ett snabbt exempel som skickar data till den angivna URL:en så snart ett element har ändrat position.

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

Vad detta gör är att det skapar en array av elementen med hjälp av elementen id . Så jag brukar göra något sånt här:

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

När du använder serialize alternativet kommer det att skapa en POST-frågesträng så här:item[]=1&item[]=2 etc. Så om du använder - till exempel - dina databas-ID:n i id attribut, kan du sedan helt enkelt iterera genom POSTed-arrayen och uppdatera elementens positioner därefter.

Till exempel i PHP:

$i = 0;

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

Exempel på jsFiddle.