Javascript jQuery对拖动div的盲效应_Javascript_Jquery_User Interface

Javascript jQuery对拖动div的盲效应

javascript jquery user-interface

Javascript jQuery对拖动div的盲效应,javascript,jquery,user-interface,Javascript,Jquery,User Interface,我在一个页面上有很多div，可以拖放。我还对它们实现了盲效果，这样如果我不想看到，我就可以最小化和最大化内容我有一个问题，如果我有3个项目堆叠在一起，垂直地，我把底部的一个移动到顶部的右边，并最小化顶部的div，所有的东西都向上滑动-而我向上移动的第三个div直接滑出屏幕我试过很多方法，比如让div使用绝对定位，但在某些情况下会导致div无法向上滑动的问题。由于偏移和相对定位，动态地重新排序div会导致div在屏幕上四处抛出我只希望这样，当用户向左或向右拖动div，并最小化“较早”的div

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

我有一个问题，如果我有3个项目堆叠在一起，垂直地，我把底部的一个移动到顶部的右边，并最小化顶部的div，所有的东西都向上滑动-而我向上移动的第三个div直接滑出屏幕

我试过很多方法，比如让div使用绝对定位，但在某些情况下会导致div无法向上滑动的问题。由于偏移和相对定位，动态地重新排序div会导致div在屏幕上四处抛出

我只希望这样，当用户向左或向右拖动div，并最小化“较早”的div时，所有后续div都不会移动

对此，我们非常感谢您的任何建议

编辑1：绝对定位的问题如下。我从A、B和C开始，在一个垂直的列中。所有项目均展开。我把B移到A的右边，C移到B的正下方。这给了我两列（A是一列，B是另一列）。在一切都是绝对的情况下，如果我试图关闭B，那么C不会向上移动——这是理所当然的。然后我试着“有选择地”使事物绝对化，从而在相对和绝对之间切换，但我遇到了坐标问题。如果您有一个相对位置，左：100px，右：50px，则将位置翻转到绝对位置会导致在绝对上下文中解释这些坐标。我的控制权从屏幕上飞走了。我试图通过使用jQuery的offset函数获取绝对坐标来解决这个问题，但是这会返回相对坐标，我被卡住了。我自己也试着保持绝对坐标，但出于某种原因，它也不起作用。它正在失去控制：）

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

                        }
                    }

HTML正文

这是尸体。它只是一些代表不同内容的div。标有“Hiddeble”类的div是jQuery盲的div

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


foobar1
foobar2
foobar3

您是否能够发布一些显示这种行为的示例代码（可能在jsfiddle.net上）？您的问题肯定是相对定位，即相对于文档流中的正常位置定位元素。如果更改div的大小，则会更改文档流，因此会更改相对定位元素的定位点。你能展示一些示例代码并解释一下绝对定位有什么问题吗？我更新了编辑。我也会准备一些代码。我现在在另一台电脑上。哇，当我读到这篇文章时，我想到了一个网站，可以让你。。。感谢Dutchie提供jsfiddle.net；）

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