Get order of list items in a jQuery Sortable list after resort
<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="nofollow">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>
