JavaScript множество плъзгащи се DIV прозорци, zIndex на фокус

Имам множество DIV прозорци с възможност за плъзгане на JavaScript. Когато щракна върху DIV, искам прозорецът да получи най-високата стойност на z-индекс. Направих решение чрез добавяне/премахване на класове към елемента във фокуса, НО бих искал прозорците да запазят своя ред на „слоеве“ (сякаш целият възел на прозореца на DIV е добавен отново към DOM при щракване ).

Да кажем, че има пет DIV в DOM. 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-индекс, така че това не винаги е най-доброто решение.

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-индекса може да стане доста голяма (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