title: Return a new order of the elements after a drag and drop event in JQuery
body: <p>I have place my sample at the below location : <a href="http://jsbin.com/axegem/1" rel="nofollow">http://jsbin.com/axegem/1</a></p>
  
  <p>Here is the scenario. When I drag the divs and drop them on to another place, I need to retrieve the new order of the divs. For example, lets say (with respect to my sample), I dragged and dropped <strong>DIV 3</strong> after <strong>DIV 6</strong>. Now I am trying to get the new order of the divs. For testing, I am alerting their html text in the following code:</p>
  
  <pre><code>$(".draggable").each(function(){
    alert($(this).html());
  });
  </code></pre>
  
  <p>I am expecting the alert order to be: <strong>DIV 1, DIV 2, DIV 4, DIV 5, DIV 6, DIV 3, DIV 7, DIV 8, DIV 9</strong>. But what I get in the sample is <strong>DIV 1, DIV 2, DIV 3, DIV 4, DIV 5, DIV 6, DIV 7, DIV 8, DIV 9</strong>.</p>
  
  <p>How can I get the new order of the divs after dropping them in a new location?</p>