使用JQuery UI可拖动对象、堆栈和z索引

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

我还使用了stack函数来确保在拖动div时，它们被带到前面。这也很有效

我遇到的问题是，当单击一个新链接时，如果先前拖动的div仍然打开，则新div将在其后面打开—与z-index无关。如果尚未拖动上一个div，则新窗口将在前面打开

有没有快速解决这个问题的方法

我用于拖动的JS是：

$.window.draggable{ 句柄：。窗口栏， 安全壳：。桌面， 卷轴：错， 快照：。桌面， 快照模式：内部， 堆栈：。窗口 }; 我用于添加新窗口的代码是：

$a[数据窗口]。单击函数{ const windowToOpen=$this.datawindow $inputstart-menu.prop已选中，为false； $+windowToOpen.show； } 尝试堆叠具有窗口类的div，而不是担心z索引，并且为了在单击后在顶部显示div，而不是拖动，您需要使用以下代码

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

默认情况下，该值为distance:10，这意味着除非您将其拖动到10像素，否则它不会显示在顶部。通过将该值设置为距离：0，使其在单击时在每个人的顶部都可见

就你而言：

工作示例如下：

$function{ $container.window.draggable{ 光标：“移动”， 包含：'父'， 堆栈：。窗口， 距离：0 }; }; 身体{ 保证金：0px } .窗户{ 最小宽度：180px； 宽度：180px； 最小高度：180px； 高度：180像素； 背景：白色； 位置：固定！重要； 边框：1px纯黑； } .窗户h4{ 文本对齐：居中； 保证金：0； 背景：绿色； 颜色：白色； } 容器{ 宽度：800px； 高度：500px； 背景：666666； } 容器>分区：第n-child1{ 左：0px； 顶部：0px； } 容器>分区：第n-child2{ 左：30px； 顶部：30px； } 容器>分区：第n-child3{ 左：60px； 顶部：60px； } 容器>分区：n-child4{ 左：90px； 顶部：90px； } 一 二 三 四

---

请张贴您的代码，使其清晰，我们需要看到更多的代码，以帮助您。特别是拖动时移动z索引的部分，尽管最好是完整MCVE。我的第一个想法是在活动元素上设置一个类，将z索引设置为高于其他元素。然后，您可以选择该类，并在添加新元素时将其删除。对不起，我们已经添加了代码中处理新窗口和拖动的基本元素。谢谢，距离选项非常有用。但是，我仍然面临这样一个问题：如果生成一个新窗口，该新窗口总是显示在以前移动的窗口下。为此，您只需添加一个具有最大索引值的新窗口，即z-index:999999。通过将此值添加到新生成的项目中，您的新窗口将在前面弹出，每当用户尝试拖动或单击它时，它的z索引将由库进行调整，您不必担心维护和计算z索引。这就是问题所在。如果新窗口的z索引为9999999，则它将始终显示在最后移动的div下。我正在尝试查看是否可以使用stop:event进行修复，但似乎没有任何效果。请在您的问题中共享您的HTML代码，以便让我了解您面临的问题。

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