可拖动元素的遏制

Question

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

这是http://jsfiddle.net/gkvgn/8/ 的 jsfiddle。该 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 从第一个容器到第二个？谢谢。

Answer 1

不得不删除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/.