Question

I specify the containment option for a draggable to be ‘document’ but the draggable element cannot be dragged outside of the container. This is only possible if I specify a very high z-index. This results in a strange display (draggable floats over other page elements). What must I specify to have the draggable divs from the editdiv container be draggable to the editdiv2 container?

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

});

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

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

What must I fix to be able to drag an element div, e.g. Facebook.com from the first container to the second? I have a jsfiddle at http://jsfiddle.net/gkvgn/8/. Thanks.

Answer 1

Had to remove 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/ .