Swap elements when you drag one onto another using jQuery UI

James picture James · Oct 2, 2011 · Viewed 24.7k times · Source

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

satrun77 picture satrun77 · Oct 4, 2011

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