You can add containment dynamically like this:
$(this).draggable( "option", "containment", "parent" );
How do i remove the containment again? Like:
$(this).draggable( "option", "containment", "none" );
except that doesn't work.. I could not find any methods for it in the API documentation
EDIT: I want to be able to drag the item but with no containment. I am using this with checkboxes:
var denne = $(this);
if ($('#containment').is(':checked')) {
$(this).draggable( "option", "containment", "parent" );
}
$("#containment").each(function(){
if ($(this).prop('checked')==false){
denne.draggable( "option", "containment", false );
}
});
Depending on what you want to do...
You could "disable" the element so that it is no longer draggable.
$(this).draggable( "option", "disabled", true );
Or you could change the containment boundaries so that the element can be draggable outside of the original constraints.
$(this).draggable( "option", "containment", "window" );
Or by specifying the exact boundaries.
$(this).draggable( "option", "containment", [x1, y1, x2, y2] );
Or as Menencia mentioned in the comments, you could try setting the containment to false
$(this).draggable( "option", "containment", false );