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.

Answer 1

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