How to swap 2 items using Draggable and Droppable?

Question

Problem

I have 4 images. User can drag and drop them to another list and change the order of the images. Target is that the users selects the order of the images. The problem is that I am unable to swap these images when they are place on each other.

HTML

<ul id="choices">
    <li><img src="http://placehold.it/200x200&text=1" /></li>
    <li><img src="http://placehold.it/200x200&text=2" /></li>
    <li><img src="http://placehold.it/200x200&text=3" /></li>
    <li><img src="http://placehold.it/200x200&text=4" /></li>
</ul>

<ul id="answers">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

jQuery

(function ($) {

    $("#choices li img").draggable({
        revert: true,
        zIndex: 10,
        snap: "#answers li",
        snapMode: "inner",
        snapTolerance: 40
    });

    $("#answers li").droppable({
        drop: function (event, ui) {
            var dropped = ui.draggable;
            var droppedOn = this;

            if ($(droppedOn).children().length > 0) {
                alert("I need to swap these");
            }

            $(dropped).detach().css({
                top: 0,
                left: 0
            }).prependTo($(droppedOn));
        }
    });
})(jQuery);

CSS (not realy important)

img {
    display: block;
    z-index: 3;
}
#choices, #answers {
    display:block;
    padding: 0;
    margin: 0;
}
#choices li, #answers li {
    display: inline-block;
    height: 200px;
    width: 200px;
    margin: 10px;
    background: #515151;
}
#answers li {
    position: relative;
}

Example

http://jsfiddle.net/K6QNg/

Answer 1

My solution might not be the most elegant (maybe someone can provide something more intuitive?), but it seems it works ;)

Fiddle: http://jsfiddle.net/W9Z46/14/

(function ($) {
    var lastPlace;

    $("#choises li img").draggable({
        revert: true,
        zIndex: 10,
        snap: "#answers li",
        snapMode: "inner",
        snapTolerance: 40,
        start: function (event, ui) {
            lastPlace = $(this).parent();
        }
    });

    $("#answers li").droppable({
        drop: function (event, ui) {
            var dropped = ui.draggable;
            var droppedOn = this;

            if ($(droppedOn).children().length > 0) {
                $(droppedOn).children().detach().prependTo($(lastPlace));
            }

            $(dropped).detach().css({
                top: 0,
                left: 0
            }).prependTo($(droppedOn));
        }
    });
})(jQuery);

As you can see I'm just keeping the place you started draggin from in a variable lastPlace and later when you drop and check something is there, you place it in the place you started dragging before.

Answer 2

You should probably try with sortable instead of droppable in the receiving list. That should give you the functionality you are looking for.

Answer 3

I also to encountered same problem.But my code is a little different.

    $(document).ready(function(){
    var x=[60,270,480];
    var y=[170,170,170];

    $(".draggable").draggable({
        revert:"invalid",
        start:function(){

        }
    });

    $(".droppable").droppable({
        accept:".draggable",
        hoverClass:"active",
        drop:function(ev,ui){
            if($(this).attr("name")!=null){
               var d=$(this).attr("name");
               var dgid=$(ui.draggable).attr("data-id")-1;
               $("#"+d).animate({left:x[dgid],top:y[dgid]});
               $("#drop"+$(ui.draggable).attr("data-id")).attr("name",$(this).attr("name"));
               $("#"+d).attr("data-id",$(ui.draggable).attr("data-id"));
            }
            var dpid=$(this).attr("data-id")-1;
            $(this).attr("name",$(ui.draggable).attr("id"));
            $(ui.draggable).attr("data-id",$(this).attr("data-id"));
            $(ui.draggable).animate({left:x[dpid],top:y[dpid]},300);
        }
    });
});

Check out Fiddle