可拖动元素的遏制 [英] Containment for draggable element

问题描述

如何定义可拖动对象的包含区域以使其可拖动到其父元素之外?我有两个可放置的容器，其中包含可拖动的 div.我想在容器之间拖动包含的 div.但是 div 会落在父容器的边框下方，而不是越过.如果我设置了一个非常高的 z 索引，我只能让 div 从一个容器转到另一个容器，这会导致 div 没有真正放在容器中.这会打乱页面显示.

How do I define the containment area for a draggable to have it draggable outside of its parent element? I have two droppable containers that have draggable divs in them. I want to drag the contained divs between the containers. But the divs drop under the border of the parent container instead of going across. I can only get the divs to go from one container to another if I set a very high z index, which causes the divs to not really be place in the container. This messes up the page display.

这是 http://jsfiddle.net/gkvgn/8/ 的 jsfiddle.该 jsfiddle 中的相关代码是使容器 div 可拖动和可放置以及包含的 div 元素可通过包含文档"进行拖动的功能.

Here is the jsfiddle for this http://jsfiddle.net/gkvgn/8/. The relevant code in that jsfiddle is that function where the container divs are made draggable and droppable and where the contained div elements are made draggable with containment of '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 似乎比选择文档"时受到更多限制.

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'.

由于我认为 z-index 是个问题，所以我在 css 中为 ui-draggable-dragging 类设置了 z-index.

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;
}

我必须解决什么问题才能拖动元素 div，例如Facebook.com 从第一个容器到第二个?谢谢.

What must I fix to be able to drag an element div, e.g. Facebook.com from the first container to the second? Thanks.

推荐答案

不得不删除 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/ .

这篇关于可拖动元素的遏制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！