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);
}
}
You have to modify the code based on your application i just gave you the idea