可拖动元素的遏制

Posted 2023-02-22

【中文标题】可拖动元素的遏制

【英文标题】：Containment for draggable element

【发布时间】：2011-12-02 10:14:47

【问题描述】：

如何定义可拖动对象的包含区域以使其可拖动到其父元素之外？我有两个可放置的容器，其中包含可拖动的 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 从第一个容器到第二个？谢谢。

【参考方案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/.