Co Koder Co Koder - 1 year ago 77
Javascript Question

Get the order of list item in jquery sortable

I have done this 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.

Answer Source

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)

function submit(){
   var idsInOrder = $("#sortable2").sortable("toArray");
   //-----------------^^^^
   console.log(idsInOrder);
}

However, as documented the toArray() method will use the id attribute of sortable items by default when serializing. You will need to add a unique id attribute to each of the sortable items for this to work:

<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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download