JavaScript 多个可拖动的 DIV 窗口，zIndex 在焦点上答案

【问题标题】：JavaScript multiple draggable DIV windows, zIndex on focusJavaScript 多个可拖动的 DIV 窗口，zIndex 在焦点上
【发布时间】：2011-12-29 21:37:56
【问题描述】：

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

【问题讨论】：

标签： javascript z-index

【解决方案1】：

如果您不想遍历所有 div 并且不想弄乱 z-index，您可以在拖动之前再次将该 div 附加到父元素（主体？）。

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

【讨论】：

我试过这个但是，这似乎在使用 IE 时删除了 div 内的点击事件。这也将 div 重置为其默认状态（在 div 中完成的更改，例如滚动或重置的内容）每次附加。

【解决方案2】：

如果您想在不重新附加元素的情况下执行此操作，我在不久前编写类似内容时的解决方案是跟踪最大 z-index。每次前移窗口时，最大 z-index 都会增加，并且元素的 z-index 会设置为新值。当然，如果有人把窗户弄得够乱，他们最终可能会得到非常大的 z-index 值，所以这并不总是最好的解决方案。

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

【讨论】：

【解决方案3】：

第一个也是最简单的方法：每次选择一个 div 时，只需增加最大 z-index 即可。由于 z-index 值可能会变得非常大（如果我没记错的话是 2147483647），您很可能永远不会用完关卡...

以下 sn-ps 使用了一些 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
        // ...
    }
});

【讨论】：

这很好用。我试过第一个例子，但没有 jQuery。