JQuery UI draggable: Exceed containment on one side

Well that expandParent function is not going to work because container boundaries has been set by JQuery UI and it wont be updated until you release the mouse .

So i can think of two solution here one is elegant and the other is tricky

Obviously the elegant solution would be writing your own containing method which is free at bottom .

But now i have a tricky solution by using a dummy parent element and set its height to a large value like 1000 or height of window and then set overflow hidden attribute for real parent.

Here is my solution :

<div id="parentElement">
    <div id="dummy-parent">
        <div id="dragElement" class="dragClass">
            <p>Drag me around!</p>
        </div>
    </div>
</div>



function expandParent(parentName, childName) {
    var dragEl = $(childName);
    var parentEl = $(parentName);
    var dragElHeight=dragEl.height();
    if(parentEl.height() <= dragElHeight) {
        parentEl.height(dragElHeight);
    }
}

Check the JS Fiddle

You have to modify the code based on your application i just gave you the idea

Looks like inside JQuery UI they keep the information of the parent at the beginning of the drag, so even if you change the size it will still restrict the drag.

To fix that you can set your own containment bounding box.

$("#dragElement")
    .draggable({
        cursor      : "move",
        scroll      : false,
        containment : [20, 20, 400+20, 1000],
        drag : function(event, ui) {
            expandParent("#parentElement", "#dragElement");
        }
    })
    .resizable({
        containment : "parent",
        resize : function(event, ui) {
            expandParent("#parentElement", "#dragElement");
        }
    });

function expandParent(parentName, childName) {
    var dragEl = $(childName);
    var dragElTop = parseInt(dragEl.css("top"), 10);
    var dragElHeight = parseInt(dragEl.css("height"), 10);
    var dragElBottom = dragElTop + dragElHeight;
    var parentEl = $(parentName);
    var parentElBottom = parseInt(parentEl.css("height"));
    if(parentElBottom <= dragElBottom + 20) {
        parentEl.css("height", dragElBottom+20);
    }
}

With the above code, it will allow the resize of the parent up to 1000+20 in height. You can try the above code here (JSFiddle).

If needed to do a dynamic container, at the beginning (and in the resize method), set the new container with the correct BoundingBox.

var p = $("#parentElement");
var dragWidth = parseInt($("#dragElement").css('width'));
var left = p[0].offsetLeft;
var top = p[0].offsetTop;
var width = parseInt(p.css("width"), 10)-dragWidth;
var containment = [left, top, width+left, 1000];

Yeah, I know the solution is kind of hackish.. but anyway, I just updated the JSFiddleThis solution may not be to calculate and re-set dynamically the size of the container. Just wanted to have a JSFiddle working nicely.