I've got a number of divs on a page that I can drag and drop around. I also implemented the blind effect on them so that I can minimize and maximize the content if i don't want to see it.

I've got a problem that if I have 3 items stacked on top of each other, vertically, and I move the bottom one to the right of the top one and minimize the top div, everything slides upwards - and the 3rd div that I moved up slides right off the screen!

I've tried a ton of stuff, like making divs use absolute positioning but that causes problems of divs not sliding upwards in some circumstances. Reordering the divs dynamically causes the divs to be thrown around the screen because of offsets and relative positioning.

I just want it so that when the user drags divs over to the left or right and an "earlier" div is minimized, all subsequent divs don't get moved.

Any suggestions on this one are greatly appreciated.

Edit 1:
The problem I'm having with the absolute positioning is as follows.
I start with A, B, and C in a vertical column. All items are expanded. I move B to the right side of A and C right under B. This gives me 2 columns (A being one and B,C being the other). With everything being absolute, if I try to close B, then C doesn't move up - rightfully so.
I tried then making things "selectively" absolute, thereby flipping between relative and absolute but I got into a problem with coordinates. If you have a relative position and left:100px and top:-50px, then flipping the position to absolute causes these coordinates to be interpreted within an absolute context. My control flies off the screen. I tried fixing this by getting the absolute coordinates using jQuery's offset function, however this returns the relative coordinates and I'm stuck. I tried to maintain the absolute coordinates myself, but it didn't work either for some reason. It's getting out of control :).

Javascript

This javascript bind is called when the page is loaded. I bind this function to a PNG arrow so that when the arrow is pressed, the content in the appropriate div expands and contracts.

Would you be able to post some sample code (maybe on jsfiddle.net) showing this behavior?
–
Dutchie432May 17 '11 at 20:56

Your problem is definitely relative positioning, which positions the elements relative to their normal position in the document flow. If you change the size of your divs, that changes the document flow, hence it will change the anchor point of the relatively positioned elements. Can you show some sample code and explain what problems are you having with absolute positioning?
–
DarthJDGMay 17 '11 at 21:21

I updated the edits. I'll get some code up too. I'm on a different computer right now.
–
mj_May 17 '11 at 22:30

wow, as I was reading this, I had an idea for a site that would let you... Thanks Dutchie for jsfiddle.net ;)
–
DavidMay 18 '11 at 2:20