可拖动元素的包含

如何定义可拖动对象的包含区域以使其可拖动到其父元素之外？我有两个可放置的容器，其中有可拖动的 div。我想在容器之间拖动包含的 div。但是 div 落在父容器的边框下方，而不是穿过父容器的边框。如果我设置了非常高的 z 索引，我只能让 div 从一个容器移动到另一个容器，这会导致 div 并未真正放置在容器中。这会扰乱页面显示。

这是 jsfiddlehttp://jsfiddle.net/gkvgn/8/ http://jsfiddle.net/gkvgn/8/。 jsfiddle 中的相关代码是使容器 div 可拖动和可放置的函数，以及使所包含的 div 元素通过包含“文档”可拖动的函数。

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

});

如果我将容器更改为“父级”或“窗口”，则容器中的可拖动 div 似乎比选择“文档”时受到更多限制。

由于我认为 z-index 是一个问题，因此我在 css 中为 ui-draggable-dragging 类设置了 z-index。

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

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

不得不删除overflow: hidden;

.link_drop_box{
       height:80%;
       /* overflow:hidden; */
}
.comdiv { 
       position:absolute; 
       padding: 0; 
       border: 1px solid DarkKhaki;
       border-radius: 3px 3px 0px 0px;
       box-shadow: inset 0px 0px 10px DarkKhaki;
       /* overflow-y: hidden;
       overflow-x: hidden; */
    }

http://jsfiddle.net/gkvgn/10/ http://jsfiddle.net/gkvgn/10/ .