Auto-Resize or Auto-Position functionality for draggable/resizable div?

Auto-Resize or Auto-Position functionality for draggable/resizable div?


I am dynamically creating draggable/resizable div elements (divInner[x]) and
appending those to a draggable parent div (divOuter). What I would like is:
1. each divInner[x] to have its resizable borders auto shrunk to fit the
text or image that is contained within it.
2. each divInner[x] to be auto positioned within divOuter such that
divInner[1].top = 0, divInner[2].top = (divInner[1].top +
divInner[1].height), etc.
Currently I can get 1 XOR 2. I am instantiating each divInner with:
$(divInner).draggable().resizable();
I can get behavior 1 when I set:
$(divInner).css("position", "absolute");
but then each divInner's top = 0 (they are all stacked on top of each
other).
I can get behavior 2 when I don't set .css("position") to anything, but then
each divInner's border is as wide as divOuter. Furthermore, each divInner's
border exhibits jumpy behavior when first resizing it. For example, if
divOuter.width = 10, then divInner.width also equals 10 even though the
width of text within divInner is only 5. When I grab divInner's east resize
handle the first time, mouseX is at 10 and divInner.width is still at 10.
Then as soon as I move the mouse to the left, divInner.width jumps to 4 and
mouseX is at 9. Also, for all of the other sibling divInner's that are not
being resized, the tops are set to 0 at this point.
Any ideas how to get BOTH 1 and 2?
Thanks,
bluetrain
--
View this message in context: http://www.nabble.com/Auto-Resize-or-Auto-Position-functionality-for-draggable-resizable-div--tp23723080s27240p23723080.html
Sent from the jQuery UI Discussion mailing list archive at Nabble.com.