改变其中的顺序 's overlap each other with jQuery mouse-click events

Question

我正在尝试在我的页面上交互式创建指定的div，因此，在单击时更改焦点（如果愿意，请转到前台）。从本质上讲，我希望div的行为与Windows在运行Microsoft Windows的计算机上的行为非常相似。

这是我到目前为止使用z-index得出的结果，它确实有效。问题是div似乎有自己的“顺序”，所以当它们根据它们放在HTML中的位置相互重叠时可以这么说。

例如，如果你点击“Div2”然后点击“Div1”，你可以看到“Div2”最终会回到“Div3”后面，而不是像以前一样停留在它前面。我想命令保留点击。如果单击Div2，它应该在前面，然后单击Div1然后它将在Div2前面，等等。

任何有关此方法的想法都将非常感激。先感谢您！

// Global vars
var lastFocused;
    
// When left mousedown on a ".window" element, remove the ".window-focus" class from id
// specified in the global var "lastFocused".  Next, update the global var "lastFocused"
// with the most recently clicked element id.  Lastly, add the ".window-focus" class to
// the id specified in global var "lastFocused". 
$('.window').mousedown(function () {
  $(lastFocused).removeClass('window-focus');
  lastFocused = "#" + $(this).attr("id");
  $(lastFocused).addClass('window-focus');
});
    
// Make all ".window" elements resizable and draggable.
$('.window').draggable({containment: '#container'}).resizable({containment: '#container'});

html, body, #container {
        height: 100%;
        width: 100%;
        font-family: Roboto;
        background-color: #333;
        color: #c9c9c9;
        font-size: 1em;
        overflow: hidden;
}
    
.window {
        position: absolute !important;
        border: 1px solid #999;
        background-color: #222;
        height: 100px;
        width: 100px;
        z-index: 1;
}
    
#div1 { top: 20px; left: 20px; }
#div2 { top: 60px; left: 60px; }
#div3 { top: 100px; left: 100px; }
    
.window-focus { z-index: 2; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="window" id="div1">ONE</div>
<div class="window" id="div2">TWO</div>
<div class="window" id="div3">THREE</div>

Answer 1

你的问题是，你总是给当前点击的div一个z-index的2，它确实把它带到了前面，但是当你从一个元素中删除它时，它只是回到原来的z-index。你需要最后应用的z-index不要改变并让下一次点击的元素获得比前一个更高的z-index。

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

笔记：

• 不需要lastFocused变量，.window-focus CSS选择器，或者将z-index:1分配给.window元素。
• 你完全正确的元素有一个隐含的z-index基于它们在HTML中的位置。对于兄弟元素，z-index只是基于序列。序列越早，z-index越低。但是，当您开始使用不共享同一父元素的元素时，它会更复杂。有关详细信息，请参阅stacking context。
• JQuery建议使用element.on("eventName", callback)方法而不是特定于事件的方法（即element.mousedown(callback)）。
• 对于不是.window对象的元素，使用window的类名称可能不是一个好主意。这会引起混乱。对于像这样的东西，类名为stackable或draggable似乎是合适的。

var highestZ = 3; // There are 3 divs, so highest z-index in use is initially 3
    
// When any of the div.stackable elements get clicked...
$('.stackable').on("mousedown", function () {
  $(this).css('z-index', ++highestZ);  // Clicked div gets a z-index one higher than prevous highest
});
    
// Make all ".stackable" elements resizable and draggable.
$('.stackable').draggable({containment: '#container'}).resizable({containment: '#container'});

html, body, #container {
  height: 100%;
  width: 100%;
  font-family: Roboto;
  background-color: #333;
  color: #c9c9c9;
  font-size: 1em;
  overflow: hidden;
}
    
.stackable {
  position: absolute !important;
  border: 1px solid #999;
  background-color: #222;
  height: 100px;
  width: 100px;
  user-select:none;
  cursor:pointer;
}
    
#div1 { top: 20px; left: 20px; }
#div2 { top: 60px; left: 60px; }
#div3 { top: 100px; left: 100px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  
<div class="stackable" id="div1">ONE</div>
<div class="stackable" id="div2">TWO</div>
<div class="stackable" id="div3">THREE</div>