jQuery UI Sortable, dann Reihenfolge in eine Datenbank schreiben

Die jQuery-Benutzeroberfläche sortable Die Funktion enthält ein serialize Methode um dies zu tun. Es ist wirklich ganz einfach. Hier ist ein kurzes Beispiel, das die Daten an die angegebene URL sendet, sobald ein Element seine Position ändert.

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

Was dies tut, ist, dass es ein Array der Elemente erstellt, indem die Elemente id verwendet werden . Also mache ich normalerweise so etwas:

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

Wenn Sie die serialize verwenden Option, wird eine POST-Abfragezeichenfolge wie diese erstellt:item[]=1&item[]=2 usw. Wenn Sie also beispielsweise Ihre Datenbank-IDs in id verwenden -Attribut können Sie dann einfach durch das POSTed-Array iterieren und die Positionen der Elemente entsprechend aktualisieren.

Zum Beispiel in PHP:

$i = 0;

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

Beispiel für jsFiddle.