Containment for draggable element

Question

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.

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

});

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? Thanks.

user823527 user823527 · Accepted Answer · 2011-10-20T01:07:11

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

Containment for draggable element

1 Answers