Home/ Questions/Q 7441533
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T11:01:52+00:00

I have a list made as sortable using jQuery UI. The first list item

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0