可拖动项的包含选项

Containment option for a draggable

本文关键字：包含 选项 拖动      更新时间：2023-09-26

我指定可拖拽元素的包含选项为" document "，但该可拖拽元素不能拖出容器。这只有在我指定一个非常高的z指数时才有可能。这将导致奇怪的显示(可拖动浮动在其他页面元素上)。我必须指定什么有可拖动div从editdiv容器可拖动到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' }); 
});

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

因为我认为z-index是一个问题，所以我在css中为ui- dragable -drag类设置了z-index。

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

我必须修复什么才能拖动元素div，例如Facebook.com从第一个容器到第二个?我在http://jsfiddle.net/gkvgn/8/有一个网站。谢谢。

必须删除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/。

相关文章：