How to swap element with jQuery UI draggable and droppable?

Question

I have two div.containers. Both containers have div.item. With jQuery, how can I swap div.item elements by drag & drop? Both element should able to re-swap again.

Is there any simple way to do this?

Thanks...

Answer 1

OK, I got the dirty solution...

$(document).ready(function () {
    src = null;
    options = {
     revert:true,
     axis: 'x',
     opacity: 0.8,
     start: function() {
      src = $(this).parent();
     }
    };

    $(".item").draggable(options);
    $(".container").droppable({
     drop: function(event, ui) {
      src.append(
       $('.item', this).remove().clone()
       .removeClass().addClass("item")
       .css({"left": '', "opacity": ''})
       .draggable(options)
      );

      $(this).append(
       ui.draggable.remove().clone()
       .removeClass().addClass("item")
       .css({"left": '', "opacity": ''})
       .draggable(options)
      );
     }
    });
});

Hope, someone could improve this... :)

Cheer...

Answer 2

I found this solution at pengoworks:

jQuery.fn.swap = function(b){ b = jQuery(b)[0]; var a = this[0]; var t = a.parentNode.insertBefore(document.createTextNode(''), a); b.parentNode.insertBefore(a, b); t.parentNode.insertBefore(b, t); t.parentNode.removeChild(t); return this; };