javascript - 单击时将 div 移动到顶部(虚拟桌面)

Question

我有一个像虚拟桌面一样工作的应用程序(底部水平栏中的图标)。单击图标时，将打开一个窗口(动态创建)。如果您单击另一个(或相同的)图标，另一个窗口会在上一个窗口向下 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);
}

Answer 1

一个更优雅的解决方案将涉及一个结构(基本上是一个数组)保存对所有创建的窗口的引用。该结构将反射(reflect)窗口的 z-index，例如底部窗口将在 allWindows[0] 中，顶部窗口将在 allWindows[n-1] 中(其中 n 是窗口)。

一旦窗口(假设它位于索引 [3])获得焦点(被单击)，您首先更新此结构:

1. 将 allWindows[n-1](当前顶部窗口)移动到临时存放位置
2. 将 allWindows[3] 移动到 allWindows[n-1] (它现在是最上面的窗口)
3. 将索引 [3] 和 [n-1] 之间的每个窗口(不包括)向下移动一个位置
4. 将窗口放在 allWindows[n-2] 的临时存放位置(一个在顶部下方)

到目前为止，没有任何可见的变化，只是结构发生了变化:现在窗口应该以正确的顺序显示。

1. 遍历 allWindows[3]' 到 allWindows[n-1]`(包括)并将 z-index 设置为结构中的索引

这样 z-index 永远不会超过 n-1。当然，您只有在获得焦点(即被单击)的窗口已经不是顶部窗口时才这样做，以免浪费。

我看到您正在使用 jQuery。用a jQuery plugin pattern您可以将此结构存储在插件中，您将能够在点击处理程序中使用它。