我的问题是管理拖到路线列表上的新工单的位置.当添加新项目时,是否有一种简单的方法来处理更新所有列表项的位置(在数据库方面通过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调用,但是如果/当新项目添加到列表时,接收甚至可以用来执行其他操作.