jQuery UI Sortable, puis écrivez la commande dans une base de données

L'interface utilisateur jQuery sortable la fonctionnalité inclut un serialize méthode pour faire ça. C'est assez simple, vraiment. Voici un exemple rapide qui envoie les données à l'URL spécifiée dès qu'un élément a changé de 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'
        });
    }
});

Cela crée un tableau des éléments en utilisant les éléments id . Donc, je fais généralement quelque chose comme ça :

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

Lorsque vous utilisez le serialize option, il créera une chaîne de requête POST comme ceci :item[]=1&item[]=2 etc. Donc, si vous utilisez - par exemple - vos identifiants de base de données dans le id , vous pouvez alors simplement parcourir le tableau POSTé et mettre à jour les positions des éléments en conséquence.

Par exemple, en PHP :

$i = 0;

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

Exemple sur jsFiddle.