Make divs draggable and droppable for certain elements

I have a page with divs that are draggable and droppable. Each div contains nested divs that are also draggable. I want to be abl开发者_运维问答e 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?

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/