单击（虚拟桌面）将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); } 

Answer 1

一种方法是不给任何.window div提供z-index ，而是使用DOM节点定位。 即你将点击的div移动到DOM中最顶层的位置，即作为body的最后一个孩子

即：像：

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

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

Answer 2

更优雅的解决方案将涉及一个结构（基本上是一个数组），它保存对所有创建窗口的引用。 该结构将反映窗口的z索引，例如底部窗口将在allWindows[0]窗口allWindows[0] ，顶部窗口将在allWindows[n-1]窗口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]' to allWindows [n-1]`（包括）并将z-index设置为等于结构中的索引

这样，z-index永远不会超过n-1。 当然，只有当获得焦点（被点击）的窗口不是顶部窗口时才会这样做，以免浪费。

我看到你正在使用jQuery。 使用jQuery插件模式，您可以将此结构存储在插件中，并且您将能够在单击处理程序中使用它。

Answer 3

您可以让一些经理类查看当前窗口，并交换索引而不是计数。 这是一种更优雅的方式。

否则，您可能希望创建一个包含当前索引的算法。 因此，您需要将一个窗格置于顶部，同时降低其他窗格。

应该可以在其z-index上找到一个层。 所以这不应该那么难。

Answer 4

由于每次添加新窗口时都会调用Windows.prototype.moveOnTop ，因此click处理程序将堆叠以用于以前创建的窗口。 例如，在创建n窗口之后，第一个窗口将具有n处理程序，第二个窗口将具有n-1 ，等等。

因为getZindex看起来很好，所以很可能这是你问题的根源。 或者不是，但无论如何，这是你想要解决的问题。 修复它很容易：

 $(document).on('click', '.window', function() { var thisWindow = $(this); Windows.prototype.getZindex(thisWindow); }); 

这样，当您初始化应用程序时，窗口不一定存在。 它被称为事件委托 ，它意味着事件将冒泡到document ，它将查看被点击的元素是否与选择器（ '.window' ）匹配并调用处理程序（如果它）。

正如罗伯特之前所说，你的函数名称有点奇怪。 你还没有向我们展示Windows的其余部分，但它显然没有与DOM相关联。 根据猜测，我认为这可能更合适：

1. 删除Windows.prototype.moveOnTop 。

2. 将getZindex重命名为更准确的描述性名称，例如：

    Windows.prototype.moveToTop = 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); } 

3. 无论您在何处初始化应用，请添加以下内容：

    var container = '#appContainer'; // <-- the container the app is rendered into $(container).on('click', '.window', function() { var thisWindow = $(this); Windows.prototype.moveToTop(thisWindow); }); 

如果这可以解决您的问题，请告诉我们。