Swap elements when you drag one onto another using jQuery UI

Question

I have an arrangement of elements on a page:

<div>
  <div class="dragdrop" style="top:0px;  left: 0px;  ">1</div>
  <div class="dragdrop" style="top:40px; left: 0px;  ">2</div>
  <div class="dragdrop" style="top:60px; left: 0px;  ">3</div>
  <div class="dragdrop" style="top:0px;  left: 100px;">4</div>
  <div class="dragdrop" style="top:40px; left: 100px;">5</div>
  <div class="dragdrop" style="top:60px; left: 100px;">6</div>
</div>

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.)

Thanks.

Answer 1

Here is an example of how you can swap elements with drag and drop http://jsfiddle.net/76yRN/1/

Another question about swapping elements in jquery jQuery draggable items lose their draggability after being swapped (with jsfiddle example)

Hope this helps

Answer 2

You just replace the elements from one to another. Some time ago i have created a demo for swapping elements between to UL list. check this: http://www.authorcode.com/swap-elements-when-drag-one-onto-another-using-jquery-ui/