Question

我为可拖动的'文档'指定了包含选项，但是无法将拖动元素拖到容器之外。这只有在我指定一个非常高的z-index时才有可能。这会导致奇怪的显示（可拖动浮动在其他页面元素上）。我必须指定什么才能让editdiv容器中的可拖动div可以拖放到editdiv2容器？

$(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从第一个容器到第二个？我在http://jsfiddle.net/gkvgn/8/有一个jsfiddle。感谢。

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 个答案: