Блог

У меня есть несколько divs на странице, которые я могу перетаскивать. Я также внедрил эффект слепоты для них, чтобы я мог минимизировать и максимизировать содержимое, если я не хочу его видеть.

У меня проблема в том, что если у меня есть 3 элемента, уложенных друг на друга вертикально, и я перемещаю нижний справа от верхнего и минимизирую верхний div, все скользит вверх — и 3-й div, который я переместил вверх, скользит прямо с экрана!

Я перепробовал массу вещей, например, заставить divs использовать абсолютное позиционирование, но это вызывает проблемы с тем, что divs не скользят вверх при некоторых обстоятельствах. Динамическое изменение порядка divs приводит к тому, что divs разбрасываются по экрану из-за смещений и взаимного расположения.

Я просто хочу, чтобы, когда пользователь перетаскивает divs влево или вправо и «более ранний» div минимизируется, все последующие divs не перемещались.

Любые предложения по этому вопросу приветствуются.

Редактировать 1: Проблема, с которой я сталкиваюсь с абсолютным позиционированием, заключается в следующем. Я начинаю с A, B и C в вертикальном столбце. Все элементы развернуты. Я перемещаю B в правую часть от A и C прямо под B. Это дает мне 2 столбца (A — это один и B, C — это другой). Поскольку все является абсолютным, если я попытаюсь закрыть B, то C не продвинется вверх — это справедливо. Затем я попытался сделать вещи «выборочно» абсолютными, тем самым переключаясь между относительными и абсолютными, но у меня возникла проблема с координатами. Если у вас есть относительное положение и слева: 100 пикселей, а сверху:-50 пикселей, то изменение положения на абсолютное приводит к интерпретации этих координат в абсолютном контексте. Мой элемент управления исчезает с экрана. Я попытался исправить это, получив абсолютные координаты с помощью функции смещения 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, в котором я настраиваю несколько простых стилей. У меня есть несколько пустых стилей, которые я использую для доступа к divs на основе класса.

             .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

Это тело. Это просто несколько divs, которые представляют разные фрагменты контента. divs, помеченные классом «Hideable», — это те, которые закрыты 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>