jQuery UI Sorteerbaar en schrijf vervolgens de volgorde in een database

De jQuery-gebruikersinterface sortable functie omvat een serialize methode om dit te doen. Het is heel simpel, eigenlijk. Hier is een snel voorbeeld dat de gegevens naar de opgegeven URL stuurt zodra een element van positie verandert.

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

Wat dit doet, is dat het een array van de elementen maakt met behulp van de elementen id . Dus ik doe meestal zoiets als dit:

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

Wanneer u de serialize . gebruikt optie, zal het een POST-queryreeks maken zoals deze:item[]=1&item[]=2 enz. Dus als u - bijvoorbeeld - uw database-ID's gebruikt in de id attribuut, kunt u eenvoudig door de POSTed-array gaan en de posities van de elementen dienovereenkomstig bijwerken.

Bijvoorbeeld in PHP:

$i = 0;

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

Voorbeeld op jsFiddle.