jQuery UI Sortable, sau đó ghi thứ tự vào cơ sở dữ liệu

Giao diện người dùng jQuery sortable tính năng bao gồm một serialize phương pháp để làm điều này. Nó khá đơn giản, thực sự. Dưới đây là một ví dụ nhanh gửi dữ liệu đến URL được chỉ định ngay khi một phần tử thay đổi vị trí.

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

Điều này làm là nó tạo ra một mảng các phần tử bằng cách sử dụng các phần tử id . Vì vậy, tôi thường làm điều gì đó như sau:

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

Khi bạn sử dụng serialize tùy chọn, nó sẽ tạo một chuỗi truy vấn ĐĂNG như sau:item[]=1&item[]=2 v.v ... Vì vậy, nếu bạn sử dụng - ví dụ - ID cơ sở dữ liệu của bạn trong id , sau đó bạn có thể chỉ cần lặp lại qua mảng POSTed và cập nhật vị trí của các phần tử cho phù hợp.

Ví dụ, trong PHP:

$i = 0;

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

Ví dụ về jsFiddle.