Javascript 更改<；部门>'；s与jQuery鼠标单击事件相互重叠

我试图使我的页面上指定的div的互动，因此，改变焦点（来到前台，如果你愿意）时，点击。从本质上说，我希望div的行为与运行microsoftwindows的计算机上的windows非常相似

这就是我到目前为止使用z-index得到的结果，它确实起到了一定的作用。问题是div在HTML中的位置不同，当涉及到相互重叠时，它们似乎有自己的“顺序”

例如，如果您单击“Div2”然后单击“Div1”，您可以看到“Div2”实际上返回到“Div3”后面，而不是像以前一样停留在它前面。我希望订单保留为单击状态。如果单击Div2，它应该在前面，然后单击Div1，它就会在Div2前面，以此类推

任何关于解决这一问题的想法都将不胜感激。提前谢谢你

//全局变量
var聚焦；
//在“.window”元素上鼠标左键向下时，从id中删除“.window focus”类
//在全局变量“lastFocused”中指定。接下来，更新全局变量“lastFocused”
//使用最近单击的元素id。最后，将“.window focus”类添加到
//全局变量“lastFocused”中指定的id。
$（'.window'）.mousedown（函数（）{
$（lastFocused.removeClass（'window-focus'）；
lastFocused=“#”+$（this.attr（“id”）；
$（lastFocused.addClass（'window-focus'）；
});
//使所有“.window”元素都可调整大小并可拖动。
$（'.window'）。可拖动（{containment:'#container'}）。可调整大小（{containment:'#container'}）
html，主体，#容器{
身高：100%；
宽度：100%；
字体系列：Roboto；
背景色：#333；
颜色：#c9c9c9；
字号：1em；
溢出：隐藏；
}
.窗户{
位置：绝对！重要；
边框：1px实心#999；
背景色：#222；
高度：100px；
宽度：100px；
z指数：1；
}
#div1{top:20px；left:20px；}
#div2{top:60px；left:60px；}
#div3{top:100px；left:100px；}
.window focus{z-index:2；}

一个
两个
三个
您的问题是，您总是给当前单击的
div
一个
z-index
的
2
，这确实将它带到了前面，但是当您从元素中删除该类时，它只会返回到它原来的
z-index
。您需要最后应用的
z-index
不更改，并让下一个单击的元素获得一个比上一个更高的
z-index

只需跟踪分配给上次单击的
div
元素的最后一个
z-index
，并在每次分配后将其递增一，以便下一个单击的元素将获得分配给它的更高的
z-index

注意事项：


不需要
lastFocused
变量
.window focus
CSS选择器，或将
z-index:1
分配给
.window
元素
对于具有隐式
z-index
基于它们在HTML中的位置。对于同级元素，
z-index
仅基于序列。序列中越早，z索引越低。但是，当您开始使用不共享同一父元素的元素时，情况会更复杂。有关详细信息，请参见
JQuery建议使用
元素.on（“eventName”，callback）
方法而不是特定于事件的方法（即。
element.mousedown（回调）
）
使用类名称
.window
来进行分类可能不是一个好主意
不是
窗口
对象的元素。这会引起混乱。对于这种情况，类名称
stackable
或
draggable
似乎是合适的


var highestZ=3；//有3个div，所以使用的最高z索引最初是3
//单击任何div.stackable元素时。。。
$（'.stackable'）。on（“mousedown”，函数（）{
$（this.css（'z-index'，++highestZ）；//单击的div得到的z-index比前面的最高值高一个
});
//使所有“.stackable”元素可调整大小和拖动。
$（'.stackable'）.draggable（{containment:'#container'}）。可调整大小（{containment:'#container'}）
html，主体，#容器{
身高：100%；
宽度：100%；
字体系列：Roboto；
背景色：#333；
颜色：#c9c9c9；
字号：1em；
溢出：隐藏；
}
.可堆叠{
位置：绝对！重要；
边框：1px实心#999；
背景色：#222；
高度：100px；
宽度：100px；
用户选择：无；
光标：指针；
}
#div1{top:20px；left:20px；}
#div2{top:60px；left:60px；}
#div3{top:100px；left:100px；}

一个
两个
三个