首页 文章

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

提问于
浏览
0

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

  • 1

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

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

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

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

    第一种也是最可能最简单的方法:每次选择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
            // ...
        }
    });
    

相关问题