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

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

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

更清楚的信息……

当Route列表为空(尚未添加工作订单)时,它很简单 – 用户将新工作订单拖到空列表中,ajax调用用于保存Route对象和Route的详细信息(在服务器上的基础记录上)项目刚刚补充.

当用户将第二个工作单拖到路径列表中时,我想确定新工单是否会在列表中排在第一位,或者第二个,然后相应地更新列表中所有项的所有信息(服务器端).当我想要一个新的工作订单添加到已经有30个工单的路线时,事情变得非常复杂.

有没有一种简单的方法可以做到这一点,还是只需要编写大量的jQuery和后端函数来管理它？我一直在网上寻找解决方案,但找不到任何确定的东西.

解决方法

Is there a simple way to do this or is it just a matter of coding up a
decent amount of jQuery and backend functions to manage this? I have
been hunting around the net for solutions but can’t find anything all
that definitive.

差不多,但是如果您已经知道如何处理可排序的Ajax调用,那么混合两个列表不是问题.我在this page上使用了编码的修改版本.我正在使用receive event& 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调用,但是如果/当新项目添加到列表时,接收甚至可以用来执行其他操作.

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

解决方法

相关文章