jQuery Blind Effect on Dragged Divs

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.

                $('.ArrowMargin').bind('click', function () {

                var splits = this.src.split("/");

                var action = "";
                if (splits.length >= 2) {
                    var folder = splits[splits.length - 2];
                    var image = splits[splits.length - 1];

                    if (folder == "Images") {
                        if (image == "arrow_open.png") {
                            action = "close";
                            this.src = "Images/arrow_closed.png";
                        } else {
                            action = "open";
                            this.src = "Images/arrow_open.png";
                        }
                    }
                }
                var divs = document.getElementsByTagName("div");

                if (action != "") {
                    var options = {};
                    for (var i = 0; i < divs.length; i++) {
                        var element = divs[i];
                        if (element.className.indexOf("Hideable") != -1) {
                            if (this.parentNode.parentNode == element.parentNode) {
                                if (action == "open") {
                                    var jQueryObj = jQuery(element);
                                    jQueryObj.show("blind", options, 500, null);
                                } else {
                                    var jQueryObj = jQuery(element);
            开发者_StackOverflow中文版                        jQueryObj.hide("blind", options, 500, null);
                                }
                                break;
                            }

                        }
                    }

CSS

This is the CSS stuff where I set up some simple styles. I have some empty styles that I use to access divs based on class.

            .ArrowMargin { float:right; margin:0 5px 0 0; }         

            .alpha { width:300px; background-color:#000000; border-color:#424242; border-width:1px; border-style:solid; color:#c59e32; -moz-border-radius: 15px;  }

        .bravo { width:300px; background-color:#000000; border-color:#424242; border-width:1px; border-style:solid; color:#c59e32; -moz-border-radius: 15px; }

        .delta { width:300px; background-color:#000000; border-color:#424242; border-width:1px; border-style:solid; color:#c59e32; -moz-border-radius: 15px;}

        .charlie{}

        .echo{}

HTML BODY

This is the body. It's just a number of divs that represent different pieces of content. The divs marked with the "Hideable" class are those that are jQuery blinded.

<body>
    <div class="alpha">
        <div class="LeftColumnCellTitle">                
            <span class="TitleMargin">foobar1</span>
            <img class="ArrowMargin" src="Images/arrow_open.png" alt="Open"/>
        </div>            
        <div class="ui-widget-content ui-corner-all Hideable Center"></div>
    </div>

    <div class="bravo">
        <div class="LeftColumnCellTitle">
            <span class="TitleMargin">foobar2</span>
            <img class="ArrowMargin" src="Images/arrow_open.png" alt="Open"/>
        </div>
        <div class="ui-widget-content ui-corner-all Hideable charlie"></div>
    </div>

    <div class="delta">
        <div class="LeftColumnCellTitle">
            <span class="TitleMargin">foobar3</span>
            <img class="ArrowMargin" src="Images/arrow_open.png" alt="Open"/>
        </div>
        <div class="ui-widget-content ui-corner-all Hideable echo"></div>
    </div>
</body>