jQuery UI Sorterbar, og skriv derefter rækkefølge i en database

jQuery UI sortable funktion inkluderer en serialize metode at gøre dette. Det er ret simpelt, egentlig. Her er et hurtigt eksempel, der sender data til den angivne URL, så snart et element har ændret 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'
        });
    }
});

Hvad dette gør er, at det opretter en række af elementerne ved hjælp af elementerne id . Så jeg plejer at gøre sådan noget:

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

Når du bruger serialize mulighed, vil den oprette en POST-forespørgselsstreng som denne:item[]=1&item[]=2 osv. Så hvis du bruger - for eksempel - dine database-id'er i id attribut, kan du derefter blot iterere gennem POSTed-arrayet og opdatere elementernes positioner i overensstemmelse hermed.

For eksempel i PHP:

$i = 0;

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

Eksempel på jsFiddle.