Question

OK, so I grabbed this code snippet from another questions and cant for the life of me remember which one, otherwise I would just try to resurrect that question. This is what I am trying to accomplish:

I have various divs and want to me able to drag them and have them swap positions, so if I grab the red square and drop in on the blue square, they will swap places (snap into their positions). I am just trying to get the really basic code working now, and once I get that I will implement differing style sheets when they are swapped to change the content and look.

The problem I have with the current code is when I drag and drop it will drop back to its original position and create a duplicate div after my other divs. Hope this makes sense, here is the jquery:

$(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": '',"top":''})
                    .draggable(options)
                );

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

});

return this.pushStack( stack );

The markup is this:

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Styling should matter here, but if it does, I just set them to 100x100px, one red, one blue, and one green.

Answer 1

Here is a solution to this problem, withou using of swap plugins, just jQuery UI.
Fiddle: http://jsfiddle.net/promatik/YtQRd/

jQuery UI:

$(".item").on("mouseup", function(){
   $(this).css("top", "").css("left", "");
});

$(".item").draggable().droppable({
    drop: function( event, ui ) {
        draged = ui.draggable.css("top", "initial").css("left", "initial");
        dropped = $(this);
        var elems = draged.parent().children();
        if( elems.index(draged) > elems.index(dropped) ) {
            temp = draged;
            draged = dropped;
            dropped = temp;
        }
        var nElem = draged.next();
        dropped.after(draged);
        nElem.before(dropped);
    }
});

This will do the swap of the objects dragged and dropped.