jQuery draggable + droppable: how to snap dropped element to dropped-on element

Question

I have my screen divided into two DIVs. In the left DIV I have a few 50x50 pixel DIVs, in the right DIV I have an empty g

Answer 1

based on Barry's code, what if we d like to add an option with an "x" button the element to be detached again from the new parent and be reattached to the initial?

i thought sth like this, but didn't seem to work.. to make some sort of a variable that hold initial state

var flag;
$('.draggable-div').draggable({
    revert: 'invalid',
    stop: function(){
        $(this).draggable('option','revert','invalid');
        $(this).find('.undo').show();
    flag=$(this).parent();
    }
});


$('.draggable-div').find('.undo').click(function(i, e) {
    var $div = $(this).parent();
$($div).detach().appendTo(flag);
 }

sth is definately wrong but i don't know if you can get the concept... just being able to reverse whatever you have dropped to their initial state.

Answer 2

I had a similar problem - I worked around it by manually removing the dragged element from its old parent and adding it to the dropped on element.

Answer 3

I found that Keith's method worked for me. Since his answer doesn't include an example implementation, I'll post mine:

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
    }
});

or, slightly more concisely:

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
    }
});

Answer 4

I found that when you do the drag, jQuery UI adds an inline to tell you where you dropped it. Below is a sample of the code that I used to snap it into place

$('.droppable').droppable({ drop: function(ev, ui) { 
    //Get Details of dragged and dropped
    var draggedclass = ui.draggable.attr('class'),
        droppedclass = 'class' + $(this).attr('name').toLowerCase();

    //update the classes so that it looks od.       
    ui.draggable.removeClass(draggedclass).addClass(droppedclass);  
    ui.draggable.removeAttr('style');
});

Answer 5

Thanks for your post - it helped me in the right direction. I find it a bit cleaner to set the position properties of the draggable object instead of messing with the HTML code. This sets the position to the top left corner of the droppable object, but you can modify to have it centered as well.

drop: function(event, ui) {
   $(ui.draggable).css('top', $(this).position().top);
   $(ui.draggable).css('left', $(this).position().left);
}

Answer 6

$("form li").draggable({snap:'.ui-droppable', snapMode:'inner', revert:true});
$('.drop').droppable({drop:function(ev, ui)
                           {$(ui.draggable).appendTo($(this))
                                           .css({position:'static', left:'0px', top:'0px'})
                                           .draggable('option', 'disabled', false)
                                           .css({position:'relative'});
                           }
                     }
                    );