jQuery Sortable - 当新元素拖入列表时保存顺序

Question

我有两个可排序的列表，其中包含工作订单。第二个列表是Route，而第一个列表只是尚未添加到Route 列表中的所有工单的列表。这个想法是，用户按照特定顺序将工作订单拖到Route中，重新排列工作订单以创建员工将遵循的路线。

我的问题是管理拖到Route列表上的新工单的位置。当添加新项目时，是否有一种简单的方法来处理更新所有列表项的位置(通过 ajax 调用在数据库方面)？

为清楚起见，提供更多信息...

当Route列表为空时(尚未添加工作订单)，这很简单 - 用户将新工作订单拖到空列表上，进行ajax调用以保存详细信息(在服务器)刚刚添加的 Route 对象和 Route Item。

当用户将第二个工作订单拖到Route列表中时，我想确定新的工作订单是否会成为列表中的第一个，或者第二个，然后更新所有信息(服务器端)对列表中的所有项目进行相应的处理。当我想向已有 30 个工作订单的 Route 添加新工作订单时，事情变得非常复杂。

是否有一种简单的方法可以做到这一点，或者只是编写大量 jQuery 和后端函数来管理它？我一直在网上寻找解决方案，但找不到任何明确的内容。

Answer 1

每次使用 ajax 调用进行更新时，您都可以保存每列的顺序。 Working JSFiddle Example

说明如下:为此，您需要为每个可排序项目指定一个唯一的 ID。例如:

    <ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default" id='item1'>Item 1</li>
    <li class="ui-state-default" id='item2'>Item 2</li>
    <li class="ui-state-default" id='item3'>Item 3</li>
    <li class="ui-state-default" id='item4'>Item 4</li>
    <li class="ui-state-default" id='item5'>Item 5</li>
   </ul>
    <ul id="sortable2" class="connectedSortable">
        <li class="ui-state-highlight" id='item6'>Item 6</li>
        <li class="ui-state-highlight" id='item7'>Item 7</li>
        <li class="ui-state-highlight" id='item8'>Item 8</li>
        <li class="ui-state-highlight" id='item9'>Item 9</li>
        <li class="ui-state-highlight" id='item10'>Item 10</li>
    </ul>

然后您可以捕获每个可排序 li 的 id 并在 ajax 请求中返回 post 。

 $(function () {
     $("#sortable1, #sortable2").sortable({
         connectWith: ".connectedSortable",
         update: function () {
             var order1 = $('#sortable1').sortable('toArray').toString();
             var order2 = $('#sortable2').sortable('toArray').toString();

             alert("Order 1:" + order1 + "\n Order 2:" + order2); //Just showing update
             $.ajax({
                 type: "POST",
                 url: "/echo/json/",
                 data: "order1=" + order1 + "&order2=" + order2,
                 dataType: "json",
                 success: function (data) {


                 }
             });

         }
     }).disableSelection();
 });

然后，您可以在您正在执行请求的页面上执行保存订单的过程。