JavaScript多个可拖动的DIV窗口,焦点上的zIndex

我有多个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 .

回答(3)

2 years ago

如果你想在没有重新附加元素的情况下这样做,那么当我写一些类似的东西时,我的解决方案就是跟踪最大的z-index . 每次提出一个窗口时,最大z-index递增,元素的z-index设置为新值 . 当然,如果有人混淆窗户,他们可能最终会有非常大的z-index值,所以这并不总是最好的解决方案 .

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

2 years ago

如果你不想遍历所有div并且不想搞砸z-index,你可以在拖动之前再将div添加到父元素(body?) .

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

2 years ago

第一种也是最可能最简单的方法:每次选择div时,只需增加最大z-index . 由于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-indices有限制,则每次选择不同的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
        // ...
    }
});