javascript 获取jquery sortable中列表项的顺序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18702743/
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
Get the order of list item in jquery sortable
提问by Co Koder
I have done this http://jsbin.com/UBezOVA/1/edit.
我已经完成了这个http://jsbin.com/UBezOVA/1/edit。
When I click the submit button, i want to get the current order of the list item. But, it seems that
$("#sortable2").sortable("toArray")does not show the current order of list (for example sortable2).
How to get the current order of a list.
当我单击提交按钮时，我想获取列表项的当前顺序。但是，似乎
$("#sortable2").sortable("toArray")没有显示列表的当前顺序（例如 sortable2）。如何获取列表的当前顺序。
回答by Michael Berkowski
Part of your issue is a typographical error, omitting the #from the id in your jQuery selector. Otherwise, your usage of .sortable("toArray")is correct. (Note, I used console.log()there instead of alert()- watch the browser's console for better output)
您的问题的一部分是印刷错误，#在您的 jQuery 选择器中从 id 中省略了。否则，您的用法.sortable("toArray")是正确的。（注意，我在console.log()那里使用而不是alert()- 观看浏览器的控制台以获得更好的输出）
function submit(){
var idsInOrder = $("#sortable2").sortable("toArray");
//-----------------^^^^
console.log(idsInOrder);
}
However, as documentedthe toArray()method will use the idattribute of sortable items by default when serializing. You will need to add a unique idattribute to each of the sortable items for this to work:
但是，正如所记录的，该toArray()方法id在序列化时默认使用可排序项目的属性。您需要为id每个可排序的项目添加一个独特的属性才能使其工作：
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight" id='i1'>Item 1</li>
<li class="ui-state-highlight" id='i2'>Item 2</li>
<li class="ui-state-highlight" id='i3'>Item 3</li>
<li class="ui-state-highlight" id='i4'>Item 4</li>
<li class="ui-state-highlight" id='i5'>Item 5</li>
</ul>
Put those two together and it will work as you expect: http://jsbin.com/UBezOVA/6/edit
将这两者放在一起，它将按您的预期工作：http: //jsbin.com/UBezOVA/6/edit
回答by Gaurav Pandey
The documentation of toArrayof Soratble[link here]clearly says that it Serializes the sortable's item id's into an array of string.
的文件指定者的Soratble [链接点击这里]清楚地说，这Serializes the sortable's item id's into an array of string.
That means, you should use your sortable elements with an id for each one
这意味着，您应该使用带有 id 的可排序元素
<ul id="sortable2" class="connectedSortable">
<li id="1" class="ui-state-highlight">Item 1</li>
<li id="2" class="ui-state-highlight">Item 2</li>
<li id="3" class="ui-state-highlight">Item 3</li>
<li id="4" class="ui-state-highlight">Item 4</li>
<li id="5" class="ui-state-highlight">Item 5</li>
And now your code var idsInOrder = $("#sortable2").sortable('toArray');
alert(idsInOrder);will definitely output an array.
现在你的代码var idsInOrder = $("#sortable2").sortable('toArray');
alert(idsInOrder);肯定会输出一个数组。
回答by Nick Mitchell
gauravis on the right track, but as purefusionmentioned "id attributes are always supposed to start with an alpha character"
gaurav在正确的轨道上，但正如purefusion提到的“id 属性总是应该以字母字符开头”
Accordingly, The html valid approach is to add data attributes
因此，html有效的方法是添加数据属性
var idsInOrder = $("#sortable2").sortable('toArray', {attribute: 'data-id'});
$(document).ready(function() {
var idsInOrder = $("#sortable2").sortable('toArray', {
attribute: 'data-id'
});
alert(idsInOrder);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
<ul id="sortable2" class="connectedSortable">
<li data-id="1" class="ui-state-highlight">Item 1</li>
<li data-id="2" class="ui-state-highlight">Item 2</li>
<li data-id="3" class="ui-state-highlight">Item 3</li>
<li data-id="4" class="ui-state-highlight">Item 4</li>
<li data-id="5" class="ui-state-highlight">Item 5</li>
</ul>回答by Lakshan Dhanasekara
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
function submit(){
var idsInOrder = $("#sortable").sortable("toArray");
alert(idsInOrder);
}
<ul id="sortable">
<li class="ui-state-default" id='1'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
<li class="ui-state-default" id='2'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
<li class="ui-state-default" id='3'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
<li class="ui-state-default" id='4'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
<li class="ui-state-default" id='5'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
<li class="ui-state-default" id='6'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
<li class="ui-state-default" id='7'><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>
<input type="button" id="btnSubmit" value="Submit" onclick="submit()">回答by Md. Ashaduzzaman
JS :
JS：
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
function submit(){
var idsInOrder = [];
$("ul#sortable1 li").each(function() { idsInOrder.push($(this).text()) });
alert(idsInOrder.join('\n'));
}
HTML :
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.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/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>
</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>
<input type="submit" value="Submit" onclick="submit()">
</body>
</html>
This should help to display the items in current order.
这应该有助于按当前顺序显示项目。
See final ourput here : http://jsbin.com/UBezOVA/21/edit
请在此处查看最终结果：http: //jsbin.com/UBezOVA/21/edit
