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

Question

У меня есть несколько JavaScript перетаскиваемых окон DIV.При нажатии на 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.

Answer 1

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

function stepUpNode(elementDragged){
    var parentNode = elementDragged.parentNode;
    parentNode.appendChild(elementDragged);
}

Answer 2

Первый и наиболее вероятный самый простой подход: просто увеличивайте максимальный 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
        // ...
    }
});

Answer 3

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

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