title: Finding the index of an element in a list after JQuery UI drag and drop
body: <p>I have a list of elements, each element has an id which equals to its order in this list. Now I am changing the order of these elements by dragging them around. </p>
  
  <p>I have got the following two questions:</p>
  
  <ol>
  <li><p>How can I achieve the effect that when an element is dragging around, it will push up or down the elements which are above or below it?</p></li>
  <li><p>I want to dynamically change the ids of these elements to their order in the list. For example, assume there are four elements, when the first element is dragged to the bottom, it id will change to 3, and the ids of the elements above it will change accordingly. (Notice that the elements are not necessarily of equal height.)</p></li>
  </ol>
  
  <p>Here is a snippet of my code, you may access <a href="http://jsfiddle.net/shapeare/bL8jz3rp/4/" rel="nofollow">http://jsfiddle.net/shapeare/bL8jz3rp/4/</a> to see more detailed code:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="draggable" id="0"&gt;
          &lt;p&gt; dummy text &lt;/p&gt;
          &lt;p&gt; dummy text &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="draggable" id="1"&gt;
          &lt;p&gt; dummy text dummy text &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="draggable" id="2"&gt;
          &lt;p&gt; dummy text dummy text dummy text &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="draggable" id="3"&gt;
          &lt;p&gt; dummy text dummy text dummy text &lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>