可拖动元素的遏制

如何定义拖动的遏制区域以使其可拖拽到其父元素之外？我有两个可拖放的容器，其中有可拖动的div。我想拖拽容器之间的包含div。但divs放在父容器的边界下，而不是经过。如果我设置了非常高的z索引，我只能让div从一个容器到另一个容器，这导致div不能真正放在容器中。这会弄乱页面显示。可拖动元素的遏制

这是这个http://jsfiddle.net/gkvgn/8/ jsfiddle。该jsfiddle中的相关代码是这样的函数，其中容器div可拖动和放置，并且包含的div元素通过包含“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似乎比如果我选择“文件”更多的约束。

因为我认为z-index是个问题，所以我在css中设置了ui-draggable-dragging类的z-index。

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

我必须修复哪些问题才能拖动元素div，例如： Facebook.com从第一个容器到第二个？谢谢。

来源

2011-10-06 user823527

不得不移除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/。

来源

2011-10-20 01:07:11 user823527

可拖动元素的遏制

回答

相关问题