Question

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 );
            }
        });
Was it helpful?

Solution

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 );
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top