title: Get order of list items in a jQuery Sortable list after resort
body: <p>I have a list on my website. I'm using jQuery's sortable tutorial to give users the ability to change the order of the list items.</p>
  
  <p><a href="http://jqueryui.com/demos/sortable/" rel="noreferrer">http://jqueryui.com/demos/sortable/</a></p>
  
  <p>The trick is I would like to capture the order of the items immediately after a resort and assign the order values to hidden form elements which would be passed to my server via a form-submit where I could use a php script to save the new order of elements in a database.</p>
  
  <p>Here's the source code of the demo:</p>
  
  <pre><code> &lt;style&gt;
      #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
      #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
      #sortable li span { position: absolute; margin-left: -1.3em; }
      &lt;/style&gt;
      &lt;script&gt;
      $(function() {
          $( "#sortable" ).sortable();
          $( "#sortable" ).disableSelection();
      });
      &lt;/script&gt;
  
  
  &lt;div class="demo"&gt;
  
  &lt;ul id="sortable"&gt;
      &lt;li class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 1&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 2&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 3&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 4&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 5&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 6&lt;/li&gt;
      &lt;li class="ui-state-default"&gt;&lt;span class="ui-icon ui-icon-arrowthick-2-n-s"&gt;&lt;/span&gt;Item 7&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;/div&gt;&lt;!-- End demo --&gt;
  </code></pre>
  
  <p>And I'm aware that it's also possible to assign a call-back function that fires when sorting stops:</p>
  
  <pre><code>$( ".selector" ).sortable({
     stop: function(event, ui) { ... }
  });
  </code></pre>
  
  <p>Thanks!</p>