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 /

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 /

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

any ideas?

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/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/F4bxA/4/

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

any ideas?

• javascript
• jquery
• html
• css
• draggable

Share Improve this question Follow edited Apr 11, 2016 at 11:53 shas 70322 gold badges99 silver badges3131 bronze badges asked Aug 1, 2013 at 10:38 Barry WattsBarry Watts 79422 gold badges1414 silver badges4444 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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

heres a js fiddle of a working model http://jsfiddle/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);
    }
},

Put your javascript like this:

var i = $('#draggable');
var o = $('#content');
i.draggable({
   drag: function (event, ui) {
      if (i.position().top > o.height() - i.height()) {
           o.height(o.height() + 10);
       }
       if (i.position().left > o.width() - i.width()) {
           o.width(o.width() + 10);
       }
   },
   containment: "parent"
});

i.draggable({
 drag: function (event, ui) {
    if (i.position().top > o.height() - i.height()) {
        o.height(o.height() + 5);
        return true;
    }
    if(i.position().top <= 0){
        i.draggable( 'option',  'revert', true );
        return false;
    }else
    if(i.position().left <=0){
        i.draggable( 'option',  'revert', true );
        return false;
    }else
    if(i.position().left >=o.width() - i.width()){
        i.draggable( 'option',  'revert', true );
        return false;
    }else{
        i.draggable( 'option',  'revert', false );
    }
 }

});

This way I belive it's like you want :)

Here's the link to test: http://jsfiddle/F4bxA/6/

I think this question is the same as yours and has already an answer :)

JqueryUI Draggable - Auto resize parent container