Question

I have two divs, one within the other. The outer div (the container) is of arbitrary dimensions. The inner div is set to a specified dimension smaller than its container.

I have applied jquery draggable to the inner div and I’m looking to automatically resize its parent container when I drag the inner div past the outer edges of the container. How can I go about doing this?

I see a similar feature here on StackOverflow when asking a new question. The textarea for typing in a question has a div named ‘grippie’ which resizes the textarea. This is exactly the functionality I’m looking for, but with a div instead of a textarea.

Answer 1

Here you go. Works both horizontally and vertically. See 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);
        }
    }
});