Menu
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>
874
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
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
