Make divs draggable and droppable for certain elements

Question

I have a page with divs that are draggable and droppable. Each div contains nested divs that are also draggable. I want to be able to drag nested divs from div 1 and drop them on div 2 and also the other way around. The jsfiddle where I try to do that is at this link http://jsfiddle.net/fWhDn/

If I move the msn.com link (draggable div) from div 2 to div 1, it isn't dropped into that div. What do must I fix to get the right behavior, i.e. where that link becomes part of div 1?

Answer 1

To get this to work you have to append the draggable div to the respective droppable div. You can do this through the drop event inside the droppable init. I set it up for each droppable div in order to get access to the $(this). It's also important to reset the css of the item as if not it will carry over the position it had when you were dragging it. The following is what I added:

$( "#editdiv .droppable" ).droppable({
    drop: function( event, ui ) {
        var $item = ui.draggable;
        $item.fadeOut(function() {

        $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
    });
$item.appendTo( this );
    }
});
$( "#editdiv_ .droppable" ).droppable({
    drop: function( event, ui ) {
        var $item = ui.draggable;
        $item.fadeOut(function() {

        $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
    });
$item.appendTo( this );
}
});

And here's the updated fiddle: http://jsfiddle.net/TpbZk/