Containment option for a draggable
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开发者_如何学Go 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.
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/ .
精彩评论