可拖动的遏制选项

发布于 2024-12-08 15:04:17 字数 1317 浏览 0 评论 0原文

我将可拖动元素的包含选项指定为“文档”，但无法将可拖动元素拖动到容器之外。仅当我指定非常高的 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。谢谢。

原文

I specify the containment option for a draggable to be 'document' but the draggable element cannot be dragged outside of the container. This is only possible if I specify a very high z-index. This results in a strange display (draggable floats over other page elements). What must I specify to have the draggable divs from the editdiv container be draggable to the editdiv2 container?

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

});

If I change the containment to 'parent' or 'window' the draggable divs in the container seem to be more constrained than if I select 'document'.

Since I thought that z-index was an issue, I set the z-index for the ui-draggable-dragging class in the css.

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

What must I fix to be able to drag an element div, e.g. Facebook.com from the first container to the second? I have a jsfiddle at http://jsfiddle.net/gkvgn/8/. Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

糖果控 2024-12-15 15:04:17

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

Had to remove 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/ .

回复收藏 0 原文

~没有更多了~