title: Swap elements when you drag one onto another using jQuery UI
body: <p>I have an arrangement of elements on a page:</p>
  
  <pre><code>&lt;div&gt;
    &lt;div class="dragdrop" style="top:0px;  left: 0px;  "&gt;1&lt;/div&gt;
    &lt;div class="dragdrop" style="top:40px; left: 0px;  "&gt;2&lt;/div&gt;
    &lt;div class="dragdrop" style="top:60px; left: 0px;  "&gt;3&lt;/div&gt;
    &lt;div class="dragdrop" style="top:0px;  left: 100px;"&gt;4&lt;/div&gt;
    &lt;div class="dragdrop" style="top:40px; left: 100px;"&gt;5&lt;/div&gt;
    &lt;div class="dragdrop" style="top:60px; left: 100px;"&gt;6&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I use jQuery UI (Draggable / Droppable) to make it so that if one div is dropped onto another, they swap positions? (And if it's dragged anywhere else, it reverts back to its old position.)</p>
  
  <p>Thanks.</p>