Giao diện người dùng jQuery Sắp xếp, sau đó viết thứ tự vào cơ sở dữ liệu?

Nghĩ rằng điều này cũng có thể giúp đỡ. A) nó được thiết kế để giữ tải trọng ở mức tối thiểu trong khi gửi lại cho máy chủ, sau mỗi lần sắp xếp. (thay vì gửi tất cả các phần tử mỗi lần hoặc lặp qua nhiều phần tử mà máy chủ có thể tặc lưỡi) B) Tôi cần gửi lại id tùy chỉnh mà không ảnh hưởng đến id / tên của phần tử. Mã này sẽ lấy danh sách từ máy chủ asp.net và sau đó khi sắp xếp chỉ 2 giá trị sẽ được gửi lại: Id db của phần tử được sắp xếp và id id của phần tử bên cạnh nó bị loại bỏ. Dựa trên 2 giá trị đó, máy chủ có thể dễ dàng xác định tư thế mới.

<div id="planlist" style="width:1000px">
    <ul style="width:1000px">
       <li plid="listId1"><a href="#pl-1">List 1</a></li>
       <li plid="listId2"><a href="#pl-2">List 1</a></li>
       <li plid="listId3"><a href="#pl-3">List 1</a></li>
       <li plid="listId4"><a href="#pl-4">List 1</a></li>
    </ul>
    <div id="pl-1"></div>
    <div id="pl-2"></div>
    <div id="pl-3"></div>
    <div id="pl-4"></div>
</div>
<script type="text/javascript" language="javascript">
    $(function () {
        var tabs = $("#planlist").tabs();
        tabs.find(".ui-tabs-nav").sortable({
            axis: "x",
            stop: function () {
                tabs.tabs("refresh");
            },
            update: function (event, ui) {
                //db id of the item sorted
                alert(ui.item.attr('plid'));
                //db id of the item next to which the dragged item was dropped
                alert(ui.item.prev().attr('plid'));

                //make ajax call
            }
        });
    });
</script>

Bạn thật may mắn, tôi sử dụng chính xác trong CMS của mình

Khi bạn muốn lưu trữ đơn hàng, chỉ cần gọi phương thức JavaScript saveOrder(). Nó sẽ thực hiện một POSTyêu cầu AJAX để saveorder.php, nhưng tất nhiên bạn luôn có thể đăng nó dưới dạng thông thường.

<script type="text/javascript">
function saveOrder() {
    var articleorder="";
    $("#sortable li").each(function(i) {
        if (articleorder=='')
            articleorder = $(this).attr('data-article-id');
        else
            articleorder += "," + $(this).attr('data-article-id');
    });
            //articleorder now contains a comma separated list of the ID's of the articles in the correct order.
    $.post('/saveorder.php', { order: articleorder })
        .success(function(data) {
            alert('saved');
        })
        .error(function(data) { 
            alert('Error: ' + data); 
        }); 
}
</script>
<ul id="sortable">
<?php
//my way to get all the articles, but you should of course use your own method.
$articles = Page::Articles();
foreach($articles as $article) {
    ?>
    <li data-article-id='<?=$article->Id()?>'><?=$article->Title()?></li>
    <?
}               
?>   
</ul>
   <input type='button' value='Save order' onclick='saveOrder();'/>

Trong saveorder.php; Hãy nhớ rằng tôi đã xóa tất cả xác minh và kiểm tra.

<?php
$orderlist = explode(',', $_POST['order']);
foreach ($orderlist as $k=>$order) {
  echo 'Id for position ' . $k . ' = ' . $order . '<br>';
}     
?>

Đây là ví dụ của tôi.

https://github.com/luisnicg/jQuery-Sortable-and-PHP

Bạn cần nắm bắt thứ tự trong sự kiện cập nhật

    $( "#sortable" ).sortable({
    placeholder: "ui-state-highlight",
    update: function( event, ui ) {
        var sorted = $( "#sortable" ).sortable( "serialize", { key: "sort" } );
        $.post( "form/order.php",{ 'choices[]': sorted});
    }
});

Tôi có thể thay đổi các hàng bằng cách làm theo câu trả lời được chấp nhận và ví dụ liên quan trên jsFiddle. Nhưng do một số lý do không xác định, tôi không thể có được id sau hành động "dừng hoặc thay đổi". Nhưng ví dụ được đăng trong trang UI của JQuery hoạt động tốt với tôi. Bạn có thể kiểm tra liên kết đó ở đây.