JqueryUI Draggable - Auto resize parent container

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);
        }
    }
});

Answer 2

You can use the drag function that comes with jquery draggable. In the drag function you can just check if the edges of the inner div is outside of the container div's edges.

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

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

Here are links to the api for more detailed information about how these methods work.

1. Draggable->event->drag
2. Position