Get the order of list item in jquery sortable

Question

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 $(\"#sortab

Answer 1

gaurav is on the right track, but as purefusion mentioned "id attributes are always supposed to start with an alpha character"

Accordingly, The html valid approach is to add data attributes

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>

Answer 2

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

Answer 3

The documentation of toArray of Soratble [link here] clearly says that it 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

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

Answer 4

  $( 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()">

Answer 5

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