Dragging an element between two divs

JavaScript
1

I specify the containment option for a draggable to be ‘document’ but the draggable element cannot be dragged outside of the container. This is only possible if I specify a very high z-index. This results in a strange display (draggable floats over other page elements). What must I specify to have the draggable divs from the editdiv container be draggable to the editdiv2 container?


$(function() {  
    $( "#editdiv" ).resizable();  
    $( "#editdiv" ).draggable();  
    $( "#editdiv" ).draggable("option", "handle", '#heading');  
    $( "#editdiv2" ).resizable();  
    $( "#editdiv2" ).draggable();  
    $( "#editdiv2" ).draggable("option", "handle", '#heading');  
    $( ".comurl" ).draggable();  
    $( ".comurl" ).draggable("option", "handle", '#dhandle');  
    $( "div.droppable" ).droppable({  
        drop: function( event, ui ) {  
            var $item = ui.draggable;  
            $item.fadeOut(function() {  

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

    $( ".comurl" ).draggable({ containment: 'document' });  

});

If I change the containment to ‘parent’ or ‘window’ the draggable divs in the container seem to be more constrained than if I select ‘document’.

Since I thought that z-index was an issue, I set the z-index for the ui-draggable-dragging class in the css.


.ui-draggable-dragging {  
   z-index: 999999;  
   background-color: red;  
}

What must I fix to be able to drag an element div, e.g. Facebook.com from the first container to the second? I have a jsfiddle at http://jsfiddle.net/gkvgn/8/. Thanks.