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

问题描述

如何定义可拖动的容纳区域以将其拖动到其父元素之外？我有两个可拖放的容器，其中有可拖动的div。我想在容器之间拖动包含的div。但是divs在父容器的边界下方，而不是跨越。如果我设置了一个非常高的z索引，我只能从一个容器到另一个容器，这使得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.

这是这个jsfiddle这个 http://jsfiddle.net/gkvgn/8/ 。该jsfiddle中的相关代码是该容器div的可拖放和可拖放的功能，并且包含的​​div元素被包含document可拖动。

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

});

如果我将遏制更改为父或窗口，容器中的draggable 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是一个问题，我设置了u-draggable拖动的z-index css中的类。

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屋！