JqueryUI Draggable - autosize parent container

Question

I have two divs, one inside the other. The outer div (container) has arbitrary sizes. The inner div is set to a specified size smaller than its container.

I applied jquery being dragged into the inner div, and I want to automatically resize its parent container when I drag the inner div over the outer edges of the container. How can i do this?

I see a similar function here in StackOverflow when I ask a new question. The text box for entering the question has a div called "grippie" that resizes the text box. These are exactly the functions I'm looking for, but with a div instead of a text field.

Answer 1

Here you go. It works both horizontally and vertically. Watch it in action at http://jsfiddle.net/evunh/1/

var i = $('#inner'); var o = $('#outer'); 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); } } }); 

Answer 2

You can use the drag function that comes with jquery draggable. In the drag and drop function, you can simply check if the edges of the inner div are outside the borders of the div container.

If thay, increase the width or height of the container div.

You can use the position method, which is native in jquery ui, to check the positions of the top, bottom, left and right of both div tags.

Below are links to the api for more details on how these methods work.

• Draggable -> event-> drag
• Position