在度假后获取jQuery可排序列表中的列表项的顺序
我的网站上有一个列表。 我正在使用jQuery的可排序教程，使用户能够更改列表项的顺序。
http://jqueryui.com/demos/sortable/
诀窍是我想在度假村后立即捕获项目的顺序，并将订单值分配给隐藏的表单元素，这些元素将通过表单提交传递给我的服务器，我可以使用php脚本保存新订单数据库中的元素。
这是演示的源代码：
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } #sortable li span { position: absolute; margin-left: -1.3em; } $(function() { $( "#sortable" ).sortable(); $( "#sortable" ).disableSelection(); }); - Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
而且我知道也可以分配一个在排序停止时触发的回调函数：
$( ".selector" ).sortable({ stop: function(event, ui) { ... } });
谢谢！
我在5年前写了这个问题的答案，但答案很糟糕（这个问题有近38,000个观点），所以这里有一个改进的答案。
你必须要解决这个问题的三个部分。 我们来看看这三个。
响应排序顺序的变化（步骤1）
我们需要解决的第一个问题是对排序元素顺序的变化做出反应。 如果我们查看jQuery UI可排序窗口小部件的文档 ，我们会看到它有一个change事件，只要排序顺序发生变化就会触发，并且非常适合我们的需求。
旁注：我的原始答案使用
stop而不是change事件。change是更好的（至少在这种情况下），因为它将报告排序中的所有更改，无论更改是交互式（用户）还是程序化，并且仅在订单实际更改时。 另一方面，只有当用户停止排序（释放鼠标或抬起他们的手指）时才会触发sort事件。
使用sort事件，我们现在可以响应排序中的更改。 下面将为我们初始化一个Sortable小部件，并允许我们设置一个在sort甚至触发时调用的函数：
var $sortableList = $("#your-list"); var sortEventHandler = function(event, ui){ console.log("New sort order!"); }; $sortableList.sortable({ stop: sortEventHandler }); // You can also set the event handler on an already existing Sortable widget this way: $sortableList.on("sortchange", sortEventHandler);
完成后，我们现在准备采取第2步：
检索已排序的元素（步骤2）
这部分很简单。 我们只需要在排序列表中获取元素数组。 为此，我们可以使用jQuery函数children()来询问ul （list）元素的子元素：
var listElements = $sortableList.children(); console.log(listElements); // [ , , ... ]
很好，但我们特别需要元素的值：
var listValues = []; listElement.forEach(function(element){ listValues.push(element.innerHTML); }); console.log(listValues); // [ "Item 1", "Item 2", ... ]
使用.sortable("toArray")或.serialize()也是选项。
太好了！ 到最后一点。
序列化并发送新的排序顺序（步骤3）
序列化是“将数据结构或对象状态转换为可以存储的格式（例如，在文件或内存缓冲区中，或通过网络连接链接传输）的过程”（感谢Wikipedia ！）
你如何做到这一点很大程度上取决于你的具体需求，所以我们将讨论一些你可以使用jQuery完成它的方法。
AJAX：
如果我们使用AJAX，我们可以使用新订单向服务器发出请求。 jQuery会自动为我们处理listValues的序列化：
$.post("your-server.com/save_order", { "items": listValues } );
或者如果您更喜欢JSON：
$.post("your-server.com/save_order", JSON.encode({ "items": listValues }) );
形成
创建表单：
更新item输入：
var serializedValue = $.param(listValues); $("#ourForm > input").val(JSON.encode(listValues));
发送：
$("#ourForm").submit()
老答案：
HTML：
JavaScript的：
$(".selector").sortable({ stop: function(event, ui) { var data = ""; $("#sortable li").each(function(i, el){ var p = $(el).text().toLowerCase().replace(" ", "_"); data += p+"="+$(el).index()+","; }); $("form > [name='new_order']").val(data.slice(0, -1)); $("form").submit(); } });
在save_order.php中，您可以解析POST变量“new_order”并获取第1项，第2项，第3项等的订单。
尝试使用serialize格式化字符串以发送到数据库更新脚本。
这有助于：
alert($( "#sortable" ).sortable( "toArray" ).toSource());
2018年5月
这个Javascript示例将在每次排序完成时为您提供#sortableContainer中的所有DIVS列表
Item 1 Item 2 Item 3 Item 4
JS：
$( function() { $( "#sortableContainer" ).sortable({ stop: function(event, ui) { var itemOrder = $('#sortableContainer').sortable("toArray"); for (var i = 0; i < itemOrder.length; i++) { console.log("Position: " + i + " ID: " + itemOrder[i]); } } }); });
DEMO和Credits： http ： //www.tutorialspark.com/jqueryUI/jQuery_UI_Sortable_Getting_Order_of_Sortable.php