javascript - 单击将div移至顶部(虚拟桌面)

我有一个像虚拟桌面一样工作的应用程序（底部水平栏中的图标）。单击图标时，将打开一个窗口（动态创建）。如果单击另一个（或相同的）图标，则另一个窗口从上一个向下打开10px，向右打开10px，并在顶部移动。

我需要完成的是，如果单击在另一个窗口下方移动的窗口，则单击的窗口将移至顶部。

下面是到目前为止我得到的结果，但这根本不是一个好的解决方案（例如，如果您单击已经位于顶部的窗口，则该函数仍然会运行，并且窗口上的z-index会递增）。有什么更优雅的解决方案呢？提前致谢！

Windows.prototype.moveOnTop = function(){

var boxes = $('.window');

    boxes.click(function() {
        var thisWindow = $(this);
        Windows.prototype.getZindex(thisWindow);
    });
}

Windows.prototype.getZindex = function(thisWindow){

    var boxes = $('.window');
    var maxZindex = 0;

    boxes.each(function() {
        var zIndex = parseInt($(this).css('z-index'), 10);
        maxZindex = Math.max(maxZindex, zIndex);
    });

    thisWindow.css("z-index", maxZindex + 1);
}

最佳答案

一种方法是不将z-index赋予您的任何.window div，而改用DOM节点定位。也就是说，您将点击的div移到了DOM中的最高位置，即body的最后一个子元素

即类似：

Windows.prototype.moveOnTop = function(){

    $('.window').click(function() {
        var thisWindow = $(this);
        if(thisWindow.next().length > 0) thisWindow.appendTo('body');
    });

};

但是，您需要确保未为任何z-index div指定.window。