jquery draggable - containment

Question

I have a little project I\'m working on, and have an interesting containment issue using jquery\'s draggable:

Basically, I have two divs - a top & a

Answer 1

You can also use a helper: and this will allow you to add a div which you can dynamically set the size of prior the draggable action occurring. This allows you reference it in containment although it's not actually part of the page yet. If you use start:, this div won't be there by the time draggable function looks for containment element. You can clean up in the stop:

$(<>).draggable({
    helper: function (event, ui) {
        var target = $(this).clone();
        var oBody = $(document).find('body');
        var containmentDiv = $('
');
        containmentDiv
            .css('top',calculatedTop)
            .css('left',calculatedLeft)
            .css('width',calculatedWidth)
            .css('height',calculatedHeight)
            .css('position','absolute');
        containmentDiv.appendTo(oBody);
            target.children('div').remove();
            target.css('background-color','#f00');
            return target;
        },
    stop: function(event, ui) {
        $(document).filter('body').find('#div_containment').remove();
    },
    containment: "#div_containment"   //containment via selector
});

You can use a JavaScript object reference to set calculated values in helper: elsewhere