jQuery Sortable - 将新元素拖入列表时保存顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14532667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Sortable - save order when new element dragged into list
提问by Garfonzo
I have two sortable lists which hold work orders. The second list is a Routewhile the first is just a list of all the work orders that haven't been added to the Routelist. The idea is that the user drags work orders into the Routein a specific order, rearranging the work orders to create a route that the employee will follow.
我有两个保存工作订单的可排序列表。第二个列表是一段Route时间，第一个列表只是尚未添加到列表中的所有工作订单的Route列表。这个想法是用户将工作订单拖入Route特定订单，重新安排工作订单以创建员工将遵循的路线。
My problem is with managing the position of new work orders dragged onto the Routelist. Is there an easy way to deal with updating the positions of all of the list items (on the database side of things via ajax calls) as new items are being added?
我的问题是管理拖到Route列表上的新工单的位置。是否有一种简单的方法可以在添加新项目时更新所有列表项目的位置（通过 ajax 调用在数据库端）？
A bit more info for clarity...
为了清楚起见，请提供更多信息...
When the Routelist is empty (no work orders added yet) it is simple - user drags new work order onto empty list, ajax call made to save the details (on the underlying records on the server) of both the Routeobject and the Route Itemjust added.
当Route列表为空（尚未添加工作订单）时，这很简单 - 用户将新工作订单拖到空列表上，进行 ajax 调用以保存Route对象和Route Item刚刚添加的对象的详细信息（在服务器上的基础记录上）。
When the user drags the second work order into the Routelist I want to determine if the new work order will become first in the list, or second, then update all the information (server side) accordingly for all items in the list. Things get really complicated when I want to add a new work order to a Routethat already has like 30 work orders.
当用户将第二个工作订单拖到Route列表中时，我想确定新工作订单将成为列表中的第一个，还是第二个，然后相应地更新列表中所有项目的所有信息（服务器端）。当我想向Route已经有 30 个工作订单的新工作订单添加新工作订单时，事情变得非常复杂。
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.
有没有一种简单的方法可以做到这一点，或者只是编写大量的 jQuery 和后端函数来管理这个问题？我一直在网上寻找解决方案，但找不到任何确定的东西。
采纳答案by JakeGould
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.
有没有一种简单的方法可以做到这一点，或者只是编写大量的 jQuery 和后端函数来管理这个问题？我一直在网上寻找解决方案，但找不到任何确定的东西。
Pretty much yes, but if you already know how to handle Ajax calls for sortables then mixing two lists is not an issue. I am using a modified version of the coding on this page. And I am using the receiveevent& the stopeventto show how you can hook simple function into the basic sortable coding:
几乎是的，但是如果您已经知道如何处理可排序的 Ajax 调用，那么混合两个列表不是问题。我正在使用此页面上编码的修改版本。我正在使用receive事件和stop事件来展示如何将简单的函数挂钩到基本的可排序编码中：
<!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>
So when an item is sorted and the sorting stops, a 'Stop!' alert box pops up. And when a new item is dragged into one list from another a 'Receive!' alert box pops up in addition to the stop. You might be able to just use the stopevent to trigger an Ajax call, but the receiveeven can be useful to do something else if/when a new item is added to a list.
所以当一个项目被排序并且排序停止时，“停止！” 弹出警告框。当一个新项目从另一个列表拖入一个列表时，“接收！” 除了停止之外，还会弹出警告框。您也许可以仅使用该stop事件来触发 Ajax 调用，但receive如果/当将新项目添加到列表中时，even 可用于执行其他操作。
回答by Jason Small
You can save order of each column every time there is an update using an ajax call. Working JSFiddle Example
每次使用 ajax 调用进行更新时，您都可以保存每列的顺序。 工作 JSFiddle 示例
Explanation below: For this to work you need to give each of the sort able items an unique id. For 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>
Then you can capture the id of each sortable li and return post that in a ajax request.
然后，您可以捕获每个可排序 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();
});
You can then doing the process to save the order on the page you are doing the requesting on.
然后，您可以执行该过程以将订单保存在您正在执行请求的页面上。
