Jquery ui 可拖动元件的安全壳

如何定义可拖动的容器区域，使其可拖动到其父元素之外？我有两个可放下的容器，里面有可拖动的div。我想在容器之间拖动包含的div。但是div落在父容器的边界下，而不是穿过。如果我设置了一个非常高的z索引，那么我只能让div从一个容器转到另一个容器，这会导致div实际上不在容器中。这会弄乱页面显示

这里是用于此的JSFIDLE。JSFIDLE中的相关代码是一个函数，其中容器div可拖放，包含的div元素可拖放，包含“document”

$(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' });

});

如果我将容器更改为“parent”或“window”，那么容器中的可拖动div似乎比选择“document”更受约束

$(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' });

});

因为我认为z-index是一个问题，所以我在css中为ui可拖动拖动类设置了z-index

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

我必须修正什么才能将元素div（例如Facebook.com）从第一个容器拖到第二个容器？谢谢。

必须删除溢出：隐藏