使用 JQuery UI 可拖动对象、堆栈和 z-index

Question

我有一个网站，当点击某些链接时会弹出可拖动的 div。这一切都很好。

我还使用堆栈功能来确保当 div 被拖动时，它们被带到前面。这也很有效。

我遇到的问题是，当单击新链接时，如果之前拖动的 div 仍处于打开状态，则新 div 会在其后面打开 - 与 z-index 无关。如果之前的 div 没有被拖拽，新的窗口会在前面打开。

有没有快速解决办法？

我用于拖动的 JS 是：

$(".window").draggable({
  handle: ".window-bar",
  containment: ".desktop",
  scroll: false,
  snap: ".desktop",
  snapMode: "inner",
  stack: ".window"
});

我用来添加新窗口的代码是：

$("a[data-window]").click(function(){
        const windowToOpen = $(this).data("window")
        $("input#start-menu").prop( "checked", false );
        $("#" + windowToOpen).show();
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Answer 1

尝试堆叠具有window 类的divs，而不是担心z-index，并且为了在单击但不拖动后在顶部显示div，您需要使用以下代码。

因此，对于堆叠，您需要添加stack: "div"，而要通过单击在顶部显示 div 元素，您需要使用distance: 0。

默认值为distance: 10，这意味着除非您不将其拖动到 10 像素，否则它不会显示在顶部。通过将值设置为distance: 0，使其在您单击时立即显示在所有人的顶部。

在你的情况下：

$(".window").draggable({
  handle: ".window-bar",
  containment: ".desktop",
  scroll: false,
  snap: ".desktop",
  snapMode: "inner",
  stack: ".window",
  distance: 0
});

---

下面的工作示例：

$(function() {
  $("#container .window").draggable({
    cursor: 'move',
    containment: 'parent',
    stack: ".window",
    distance: 0
  });
});

body {
  margin: 0px
}

.window {
  min-width: 180px;
  width: 180px;
  min-height: 180px;
  height: 180px;
  background: white;
  position: fixed !important;
  border: 1px solid black;
}

.window h4 {
  text-align: center;
  margin: 0;
  background: GREEN;
  color: White;
}

#container {
  width: 800px;
  height: 500px;
  background: #666666;
}

#container>div:nth-child(1) {
  left: 0px;
  top: 0px;
}

#container>div:nth-child(2) {
  left: 30px;
  top: 30px;
}

#container>div:nth-child(3) {
  left: 60px;
  top: 60px;
}

#container>div:nth-child(4) {
  left: 90px;
  top: 90px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div id="container">
  <div class="window">
    <h4>ONE</h4>
  </div>
  <div class="window">
    <h4>TWO</h4>

  </div>
  <div class="window">
    <h4>THREE</h4>

  </div>
  <div class="ui-widget-content window">
    <h4 class="ui-widget-header">FOUR</h4>

  </div>
</div>