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