Question

我在页面上有很多div，我可以拖放。我还对它们实施了盲目效果，这样如果我不想看到它，我可以最小化和最大化内容。

我遇到了一个问题，如果我有3个物品堆叠在一起，垂直，我将底部一个移动到顶部的一个，并最小化顶部div，一切都向上滑动 - 和第三个我向上移动的div滑出屏幕！

我已经尝试了很多东西，比如让div使用绝对定位，但这会导致div在某些情况下不会向上滑动的问题。由于偏移和相对定位，动态重新排序div导致div被抛出屏幕。

我只是想要它，以便当用户将div向左或向右拖动并且“较早”的div最小化时，所有后续div都不会被移动。

非常感谢有关此问题的任何建议。

编辑1：我对绝对定位的问题如下。我从垂直列中的A，B和C开始。所有项目都已扩展。我将B移动到A和C的右侧，在B的正下方。这给了我2列（A为1，B为C，C为另一列）。一切都是绝对的，如果我试图关闭B，那么C不会向上移动 - 这是正确的。我尝试然后“选择性地”使事情绝对，从而在相对和绝对之间翻转，但我遇到了坐标的问题。如果你有一个相对位置并且左边：100px和top：-50px，那么将位置翻转为绝对会导致这些坐标在绝对上下文中被解释。我的控件飞离屏幕。我尝试通过使用jQuery的偏移函数获取绝对坐标来修复此问题，但是这会返回相对坐标并且我被卡住了。我试图自己保持绝对坐标，但由于某种原因它不起作用。它失控了:)。

的Javascript

加载页面时会调用此javascript绑定。我将此函数绑定到PNG箭头，以便在按下箭头时，相应div中的内容会扩展和收缩。

                $('.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);
                                    jQueryObj.hide("blind", options, 500, null);
                                }
                                break;
                            }

                        }
                    }

CSS

这是CSS设置一些简单样式的东西。我有一些空的样式，我用它来基于类访问div。

            .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

这是身体。它只是代表不同内容的一些div。标有“可隐藏”类的div是jQuery盲目的那些。

<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>

jQuery对拖曳Div的盲目效果

0 个答案: