将div移动到顶部的点击（虚拟桌面） [英] Moving a div to the top on click (virtual desktop)

问题描述

我有一个像虚拟桌面的应用程序（底部的一个水平的图标）。当您点击图标时，会打开一个窗口（动态创建）。如果您点击另一个（或相同的）图标，另一个窗口将从最后一个窗口打开10px向下和10px，并在顶部移动。

需要完成的是，如果您点击在另一个窗口下移动的窗口，点击的窗口将被移动到顶部。

以下是我到目前为止，但它并不是一个很好的解决方案（例如，如果您点击已经在顶部的窗口，函数运行，窗口上的z-index会计数）。这将是一个更优雅的解决方案？感谢提前！

  Windows.prototype.moveOnTop = function（）{
 
 var boxes = $ （'。窗口'）; 
 
 box.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 = max（maxZindex，zIndex）; 
}）; 
 
 thisWindow.css（z-index，maxZindex + 1）; 
} 
  

解决方案

z-index 到任何你的 .window divs并使用DOM节点定位。即您将点击的div移动到DOM中最顶层的位置，即作为 body

的最后一个小孩。如下所示：

  Windows.prototype.moveOnTop = function（）{
 
 $（' '）.click（function（）{
 var thisWindow = $（this）; 
 if（thisWindow.next（）。length> 0）thisWindow.appendTo（'body'）; 
}）; 
 
}; 
  

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

I have an application that works like a virtual desktop (icons in a horizontal bar in the bottom). When you click on an icon, a window opens (dynamically created). If you click on another (or the same) icon another window opens 10px down and 10px to the right from the last one, and is moved on the top.

What I need to accomplish is that if you click on a window that is moved beneath another window, the clicked window gets moved to the top.

Below is what I got so far, but it isn't at all a good solution (eg. if you click on a window that's already on the top, the functions runs anyway and z-index on the window counts up). What would be a more elegant solution for this? Thanks in advance!

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);
}

解决方案

One way is not to give z-index to any of your .window divs and use DOM node positioning instead. i.e. you shift the clicked div to the topmost postion in the DOM, i.e. as the last child of body

i.e. something like:

Windows.prototype.moveOnTop = function(){

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

};

But you need to make sure that z-index is not specified for any of your .window divs.

这篇关于将div移动到顶部的点击（虚拟桌面）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！