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请求中的帖子。

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

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

Answer 2

有一种简单的方法可以做到这一点，还是仅仅是编码的问题相当数量的jQuery和后端函数来管理这个？我有一直在网上寻找解决方案，但找不到任何东西那个权威的。

非常好，但如果您已经知道如何处理可排序的Ajax调用，那么混合两个列表不是问题。我在this page上使用了修改后的编码版本。我正在使用receive event＆amp; stop event显示如何将简单函数挂钩到基本的可排序编码中：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
  #sortable1, #sortable2 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; }
  #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
  </style>
  <script>
  $(function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable",
      receive: function( event, ui ) { alert('Receive!'); },
      stop: function( event, ui ) { alert('Stop!'); }
    }).disableSelection();
  });
  </script>
</head>
<body>

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>


</body>
</html>

因此，当一个项目被排序并且排序停止时，“停止！”弹出警报框。当一个新项目从另一个列表拖到一个列表中时“接收！”警报框除了停止外还会弹出。您可能只能使用stop事件来触发Ajax调用，但是receive甚至可以在将新项目添加到列表时执行其他操作。

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

2 个答案: