以预定义的顺序初始化"jQuery UI可排序列表" [英] Initializing 'jQuery UI Sortable List' in pre-defined order
问题描述
我有一个使用jQuery UI可排序的列表.这样，第一个列表项是项目1"，第二个是项目2".我的要求是，必须根据存储在数组"arrValuesForOrder"中的顺序来初始化列表项.我们如何初始化它?
I have a list made as sortable using jQuery UI. The first list item is "Item 1", second is ‘Item 2" like that. My requirement is the list items must be initialized based on the order stored in the array "arrValuesForOrder". How do we initialize it so?
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/sunny/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function ()
{
var arrValuesForOrder = ["3", "1", "4", "2"];
$("#myUnorderedList").sortable({
axis:'y',
handle: '.handle',
update: function ()
{
var order = $('#myUnorderedList').sortable('serialize');
alert(order);
}
});
});
</script>
<style>
#myUnorderedList li img.handle
{
margin-right: 20px;
cursor: move;
}
#myUnorderedList li
{
display: block;
margin-bottom: 3px;
height:30px;
background-color: #efefef;
}
</style>
</head>
<body>
<div>
<ul id="myUnorderedList">
<li id="listItem_1">
<img src="images/arrow.png" alt="move" class="handle" />
<strong>Item 1</strong>
</li>
<li id="listItem_2">
<img src="images/arrow.png" alt="move" class="handle" />
<strong>Item 2</strong>
</li>
<li id="listItem_3">
<img src="images/arrow.png" alt="move" class="handle" />
<strong>Item 3</strong>
</li>
<li id="listItem_4">
<img src="images/arrow.png" alt="move" class="handle" />
<strong>Item 4</strong>
</li>
</ul>
</div>
</body>
</html>
推荐答案
我不认为sortable插件附带用于设置元素初始顺序的选项.我认为它期望元素最初以正确的顺序呈现(我认为这很有意义-为什么不这样做?)
I don't think the sortable plugin comes with an option to set the initial order of the elements. I think it expects the elements to be initially rendered in the correct order (which makes sense in my opinion - why don't you do that ?)
无论如何，这是一段代码，它将在初始化可排序插件之前对元素进行排序:
Anyway, here's a piece of code that will sort the elements prior to initializing the sortable plugin:
var arrValuesForOrder = ["3", "1", "4", "2"];
var $ul = $("#myUnorderedList"),
$items = $("#myUnorderedList").children();
// loop backwards so you can just prepend elements in the list
// instead of trying to place them at a specific position
for (var i = arrValuesForOrder[arrValuesForOrder.length - 1]; i >= 0; i--) {
// index is zero-based to you have to remove one from the values in your array
$ul.prepend( $items.get(arrValuesForOrder[i] - 1));
}
$("#myUnorderedList").sortable({
axis: 'y',
handle: '.handle',
update: function() {
var order = $('#myUnorderedList').sortable('serialize');
alert(order);
}
});
DEMO
这篇关于以预定义的顺序初始化"jQuery UI可排序列表"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
