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

我有多个JavaScript可拖动的DIV窗口。单击DIV时，我希望窗口获得最高的z索引值。我已经通过在焦点元素中添加/删除类找到了解决方案，但是，我希望窗口保持其“层”顺序（就像在单击时整个DIV窗口节点被重新附加到DOM一样）

假设DOM中有五个DIV。第一，第二，第三，第四和第五-div5最靠近前面，div1在后面，依此类推

---

单击div1时，-div1将获得焦点并放在前面，将div5向后设置一步。然后单击div3，-div3离前面最近，div1和div5被放回一步，如下所示：div2、div4、div5、div1、div3。

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

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

---

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

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

---

第一种也是最容易的方法：只要在每次选择div时增加最大z索引。由于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
        // ...
    }
});

//在数组中存储z-index-ordered div
var divs=$（'div'）.toArray（）.sort（函数（a，b）{
返回parseInt（$（a）.css（'zIndex'），10）-parseInt（$（b）.css（'zIndex'），10）；
});
//存储可用的z索引
变量zIndices=[]；
对于（变量i=0；i

我尝试过这个方法，但在使用IE时，这似乎会删除div中的单击事件。这也会在每次附加div时将其重置为默认状态（在div中所做的更改，如滚动或重置任何内容）。效果很好。我尝试了第一个示例，但没有jQuery。