JqueryUI Draggable - Auto resize parent container vertically only

Question

I have a div called 'content' that has a height set as auto.

I have appended a draggable child div using javascript to 'content'.

I have set the containment of the draggable div as the parent('content').

How can I make it so the outer div('content') will expand in height if I drag the draggable div down.

I know it needs a hack as the containment is stopping me dragging the inner div lower than the bottom of the outer div.

the 'content' div will have another div below it that will be positioned relative to it and will also move when the 'content' div is expanded vertically, so I have to have a predetermined height of the 'content' div before I start

any help greatly appreciated

I have set up a jsfiddle of it http://jsfiddle.net/F4bxA/3/

code to match

css

#content {
  display: block;
  position: relative;
  top: 215px;
  width: 600px;
  margin: auto;
  height: auto;
  border: 1px solid red;
  padding: 20px;
  min-height: 300px;
}

js

var newdiv = document.createElement('div');
newdiv.setAttribute('id', 'draggable');
newdiv.style.position = "absolute";
newdiv.style.top = "10px";
newdiv.style.left = "20px";
newdiv.style.border = '1px solid #000';
newdiv.style.display = 'inline-block';
newdiv.style.width = '75px';
newdiv.style.height = '75px';
newdiv.innerHTML = "draggable inner div";
document.getElementById("content").appendChild(newdiv);

$("#draggable").draggable({
     containment: "parent"   
});

html

<div id="content"></div>

EDIT

I have updated the jsfiddle to include the answer given below http://jsfiddle.net/F4bxA/4/

now I need to contain the inner div on three sides, top, left and right.

any ideas?

Answer 1

with a lot of help from @patricia I have managed to solve this one :-)

heres a js fiddle of a working model http://jsfiddle.net/F4bxA/10/

and the code

var g = $('#draggable');
var o = $('#content');
g.draggable({
 constraint: "#content",
 drag: function (event, ui) {
    if (g.position().top > o.height() - g.height()) {
        o.height(o.height() + 5);
        return true;
    }
    if (g.position().top <= 0) {
        $(this).css('position', 'absolute');
        $(this).css('top', '1px');
        return false;

    } else if (g.position().left <= 0) {
        $(this).css('position', 'absolute');
        $(this).css('left', '1px');
        return false;
    } else if (g.position().left >= o.width() - g.width()) {
        var leftedge = (o.width() - g.width())-1;
        $(this).css('position', 'absolute');
        $(this).css('left', leftedge + 'px');
        return false;
    } else {
        g.draggable('option', 'revert', false);
    }
},