Question

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

这是http://jsfiddle.net/gkvgn/8/的jsfiddle。该jsfiddle中的相关代码是这样的函数，其中容器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' });

});

如果我将包含更改为“父”或“窗口”，则容器中的可拖动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/。

对可拖动元素的遏制

1 个答案: