jQuery UI Diurutkan, lalu tulis pesanan ke dalam database

UI jQuery sortable fitur termasuk serialize metode untuk melakukan ini. Ini cukup sederhana, sungguh. Berikut adalah contoh cepat yang mengirimkan data ke URL yang ditentukan segera setelah elemen berubah posisinya.

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

Apa yang dilakukan adalah membuat array elemen menggunakan elemen id . Jadi, saya biasanya melakukan sesuatu seperti ini:

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

Saat Anda menggunakan serialize opsi, itu akan membuat string kueri POST seperti ini:item[]=1&item[]=2 dll. Jadi jika Anda menggunakan - misalnya - ID database Anda di id atribut, Anda kemudian dapat mengulanginya melalui array POSTed dan memperbarui posisi elemen yang sesuai.

Misalnya, dalam PHP:

$i = 0;

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

Contoh di jsFiddle.