2011-10-07 54 views
0

我指定可拖动的包含选项为'文档',但可拖动的元素不能拖出容器。这是唯一可能的,如果我指定一个非常高的Z指数。这导致了一个奇怪的显示(可拖动浮动其他页面元素)。我必须指定将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从第一个容器到第二个?我有一个jsfiddle在http://jsfiddle.net/gkvgn/8/。谢谢。

回答

0

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