如何将可拖动元素从一个容器转移到另一个容器

Question

  

可能重复：
  Containment for draggable element

我为可拖动的'文档'指定了包含选项，但是无法将拖动元素拖到容器之外。这只有在我指定一个非常高的z-index时才有可能。这会导致奇怪的显示（可拖动浮动在其他页面元素上）。我必须指定什么才能让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从第一个容器到第二个？我在http://jsfiddle.net/gkvgn/8/有一个jsfiddle。感谢。