JavaScript несколько перетаскиваемых окон DIV, zIndex в фокусе

У меня есть несколько окон DIV с возможностью перетаскивания JavaScript. При нажатии DIV я хочу, чтобы окно получало самое высокое значение z-index. Я сделал решение, добавив/удалив классы к элементу в фокусе, НО, я хотел бы, чтобы окна сохраняли свой "слой" -порядок (как если бы весь узел окна DIV был повторно добавлен в DOM при нажатии ).

Допустим, в DOM есть пять DIV. div1, div2, div3, div4 и div5. -div5 находится ближе всего к переднему краю, а div1 — к заднему и так далее.

При нажатии на div1, -div1 получит фокус и переместится на передний план, а div5 переместится на один шаг назад. Затем, щелкнув div3, -div3 становится ближе к началу, а div1 и div5 перемещаются на один шаг назад следующим образом: div2, div4, div5, div1, div3.


javascript z-index
person user1121487    schedule 29.12.2011    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Если вы хотите сделать это без повторного добавления элемента, мое решение, когда я писал что-то подобное некоторое время назад, состояло в том, чтобы отслеживать максимальный z-индекс. Каждый раз, когда окно перемещается вперед, максимальный z-индекс увеличивается, а z-индекс элемента устанавливается на новое значение. Конечно, если кто-то достаточно возится с окнами, у него могут получиться очень большие значения z-index, так что это не всегда лучшее решение.

var maximumZIndex = 1;
var bringForward = function (element) {
    maximumZIndex += 1;
    element.style.zIndex = maximumZIndex;
}
person Treip    schedule 29.12.2011

arrow_upward
1
arrow_downward

Если вы не хотите перебирать все свои div и не хотите связываться с z-index, вы можете просто снова добавить этот div к родительскому элементу (телу?) перед перетаскиванием.

function stepUpNode(elementDragged){
    var parentNode = elementDragged.parentNode;
    parentNode.appendChild(elementDragged);
}
person Luca    schedule 29.12.2011
comment
Я пробовал это, но, похоже, это удаляет события кликов внутри div при использовании IE. Это также сбрасывает div в его состояние по умолчанию (изменения, сделанные в div, такие как прокрутка или все, что сбрасывается) каждый раз, когда он добавляется. - person user1121487; 30.12.2011

arrow_upward
0
arrow_downward

Первый и, скорее всего, самый простой подход: просто увеличивать максимальный z-индекс каждый раз, когда выбирается div. Поскольку значение z-index может быть довольно большим (2147483647, если я правильно помню), у вас, скорее всего, никогда не закончатся уровни...

В следующих фрагментах используется jQuery:

var frontmostWindow = null;
var topZIndex = 10;    

$('div').click(function() {
     if (this != frontmostWindow) {
         frontmostWindow = this;
         topZIndex++;
         $(this).css('zLevel', topZIndex);

         // anything else needed to acticate your div
         // ...
     }
});

Если у вас есть ограничения на z-индексы, которые вы можете использовать, вам нужно будет переназначать уровни каждый раз, когда выбирается другой div, например. так:

// store z-index-ordered divs in an array 
var divs = $('div').toArray().sort(function(a, b) {
     return parseInt($(a).css('zIndex'), 10) - parseInt($(b).css('zIndex'), 10);
});

// store available z-indices
var zIndices = [];
for (var i = 0; i < divs.length; ++i) {
    zIndices.push($(divs[i]).css('zIndex'));
}

// Event listener for clicks
$('div').click(function() {
    alert("heyya " + this.id);
    var element = this;

    var index = divs.indexOf(element);
    // check if clicked element is not already the frontmost
    if (index < divs.length - 1) {
        // remove div from array and insert again at end
        divs.splice(index, 1);
        divs.push(this);

        // re-assign stored z-indices for new div order
        for (var i = 0; i < divs.length; ++i) {
            $(divs[i]).css('zIndex', zIndices[i]);
        }

        // anything else needed to acticate your div
        // ...
    }
});
person Julian D.    schedule 29.12.2011
comment
Это хорошо работает. Я пробовал первый пример, но без jQuery. - person user1121487; 02.01.2012