title: jQueryUI sortable placeholder index incorrect
body: <p>I have a sortable list that has a corresponding data array, I need to change the order of the array when the list is reordered. I use this code</p>
  
  <pre><code>o.dom.$editor.find('.sortable').sortable({
      start: function(event, ui) {
          var start_pos = ui.item.index();
          ui.item.data('startIndex', start_pos); // store original index
      },
      change: function(event, ui) {
          var start_pos = ui.item.data('startIndex'); // get original index
          var index = ui.placeholder.index() - 1; // get new index
          console.log(start_pos, index); // log start and end positions for debugging
  
          ui.item.data('startIndex', index); // store new index
      }
  });
  </code></pre>
  
  <p>As an example, let's say I have this list:</p>
  
  <pre><code>A
  B
  C
  </code></pre>
  
  <p>I hold list item A and drag it down to the bottom, the change event fires twice, first swapping item A with item B, then A with C, the console shows:</p>
  
  <pre><code>0 1
  1 2
  </code></pre>
  
  <p>And it's correct. Now (WITHOUT releasing the mouse from the previous drag), I drag back item A to the top, again the change event fires twice, swapping A with C, then A with B, console shows:</p>
  
  <pre><code>2 1
  1 0
  </code></pre>
  
  <p>All good.
  Now if I release the mouse, and start dragging item B to the top, the change event fires once, swapping B with A, but console shows:</p>
  
  <pre><code>1 -1
  </code></pre>
  
  <p>Which is wrong. What's going on here? I've been trying to figure this out for hours.</p>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/4dtdk2qo/1/" rel="nofollow">https://jsfiddle.net/4dtdk2qo/1/</a></p>