title: jQueryUI: How to drag onto droppable placeholders, replace an existing element, then shift existing dropped items
body: <p>I'm working on an interface that requires me to do a drag and drop onto placeholders from one unordered list to another.  However, I need to be able to sort on the drop even if elements already exist.</p>
  
  <p>The easiest way to explain this is we're looking to replace the existing element on drop, and push the other children down or up to the closest empty parent elements.</p>
  
  <p>Here is <a href="http://jsfiddle.net/hatfieldajoshua/LFLXG/" rel="nofollow">the JSFiddle</a> and a <a href="http://fiddle.jshell.net/hatfieldajoshua/LFLXG/show/" rel="nofollow">fullscreen link</a> for anyone</p>
  
  <p>Thanks in advance!</p>
  
  <p>JavaScript:</p>
  
  <pre><code>$(".draggable").draggable({
      revert: "invalid"
      // start: function(ev, ui){ ui.helper.width($(this).width()); }
  });
  
  $(".droppable").droppable({
      accept : ".draggable",
      tolerance: 'pointer',
      greedy : true,
      hoverClass: 'highlight',
      drop: function(ev, ui) {
          $(ui.draggable).detach().css({position : 'relative', top: 'auto',left: 'auto'}).appendTo(this);
      }
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;h1&gt;jQuery Drag, Drop, &amp;amp; Reorder&lt;/h1&gt;
  
  &lt;div id="left" class="left"&gt;
  
      &lt;h2&gt;Drag from this side&lt;/h2&gt;
  
      &lt;ul&gt;
          &lt;li class="list-item"&gt;&lt;span class="draggable"&gt;A&lt;/span&gt;&lt;/li&gt;
          &lt;li class="list-item"&gt;&lt;span class="draggable"&gt;B&lt;/span&gt;&lt;/li&gt;
          &lt;li class="list-item"&gt;&lt;span class="draggable"&gt;C&lt;/span&gt;&lt;/li&gt;
          &lt;li class="list-item"&gt;&lt;span class="draggable"&gt;D&lt;/span&gt;&lt;/li&gt;
          &lt;li class="list-item"&gt;&lt;span class="draggable"&gt;E&lt;/span&gt;&lt;/li&gt;
          &lt;li class="list-item"&gt;&lt;span class="draggable"&gt;F&lt;/span&gt;&lt;/li&gt;
          &lt;li class="list-item"&gt;&lt;span class="draggable"&gt;G&lt;/span&gt;&lt;/li&gt;
          &lt;li class="list-item"&gt;&lt;span class="draggable"&gt;H&lt;/span&gt;&lt;/li&gt;
          &lt;li class="list-item"&gt;&lt;span class="draggable"&gt;I&lt;/span&gt;&lt;/li&gt;
          &lt;li class="list-item"&gt;&lt;span class="draggable"&gt;J&lt;/span&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;div id="right" class="right"&gt;
  
      &lt;h2&gt;to this side&lt;/h2&gt;
  
      &lt;ul&gt;
          &lt;li class="list-item droppable"&gt;&lt;/li&gt;
          &lt;li class="list-item droppable"&gt;&lt;/li&gt;
          &lt;li class="list-item droppable"&gt;&lt;/li&gt;
          &lt;li class="list-item droppable"&gt;&lt;/li&gt;
          &lt;li class="list-item droppable"&gt;&lt;/li&gt;
          &lt;li class="list-item droppable"&gt;&lt;/li&gt;
          &lt;li class="list-item droppable"&gt;&lt;/li&gt;
          &lt;li class="list-item droppable"&gt;&lt;/li&gt;
          &lt;li class="list-item droppable"&gt;&lt;/li&gt;
          &lt;li class="list-item droppable"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>