Click to Front 和 DIV 堆叠出现问题答案

【问题标题】：Trouble with Click to Front and DIV stackingClick to Front 和 DIV 堆叠出现问题
【发布时间】：2021-01-20 21:33:46
【问题描述】：

我正在尝试设置一个类似于 Windows 的页面。有一些可拖动和可调整大小的分层 DIV。我想这样做，所以当点击一个窗口时，它会将它带到前面。

如果我使用可拖动的堆栈功能，它基本上可以按预期工作，但前提是您单击并拖动窗口。如果我只点击而不是拖动，我希望它仍然像拖动一样出现在前面。

 $('.window').click(function(){
            $('.ui-front').removeClass('ui-front');
            $(this).addClass('ui-front');
        });

这是我尝试过的一个 jsfiddle，它在其中得到了一部分： http://jsfiddle.net/wLe261mh

但它不会使图层从一次单击到另一次单击保持正确。例如，尝试将红色放在黄色上，但不要使用灰色。这是与可拖动堆栈功能相同的基本功能，但仅在拖动时才能更好地工作。（它似乎也打破了点击到前面的选项） $( ".ui-draggable" ).draggable({ cancel: '.text',stack: ".ui-draggable" }) http://jsfiddle.net/wLe261mh/1

有没有更好的方法来做到这一点？如果我能让它像可拖动堆栈函数那样工作，并且不必跟踪 z nummers 并添加/减去每个元素的数字，那就太棒了。如果我有 7-8 个窗口要跟踪，可能会很快失控。

【问题讨论】：

请考虑使用 sn-ps 代替 jsfiddles，这样可以节省时间并大大提高我们解决问题的速度。

标签： html jquery css bringtofront

【解决方案1】：

尝试 mousedown 而不是单击。仅在 mousedown 然后 mouseup 之后单击才会注册，因此如果您按住鼠标并拖动它不会触发单击。

【讨论】：

谢谢莎拉，我确实尝试过，但它似乎无法解决根本问题。 mousedown 到前面仍然有效，但它不能保持正确的顺序。然后，如果我添加可拖动堆叠，只要我拖动某些东西，addclass/remove 类函数就会停止工作。

【解决方案2】：

我找到了一个迂回的方式来实现你正在寻找的东西。

如果您将this script 合并到您网站的某个位置，则可以将您的$('.window').click(function(){}) 更改为；

$('.window').click(function(){
    $(this).simulate('drag');
});

您可以在此处查看工作演示：https://jsfiddle.net/rf7cowe3/

基本上，.ui-front 类似乎破坏了可拖动的整个 stack 函数 - 所以我必须找到一种方法来触发点击时的“拖动”事件，以便它欺骗函数来订购适当的 z 索引。

【讨论】：

这真的很接近我的预期，很棒的解决方案！我现在看到的一个小问题是，在单击主窗口后，它似乎每次都会将自身向下拖动 1-2 个像素。 Windows 2 和 3 不这样做，只有主窗口。你知道是什么原因造成的吗？此外，您添加到顶部的脚本是从普通的 jquery.simulate 定制的，还是位于我可以用作包含的地方？谢谢！
对上面的内容进行编辑：您必须先将它们拖动到一些位置，然后根据拖动它们的顺序来影响不同的窗口。如果您单击并拖动 jsfiddle 中的窗口一点，然后尝试仅单击它应该开始起作用。
@jerdill 这个问题似乎没有发生在我身上，所以我不确定你的意思是什么？也没有，我没有对我提供给你的那个脚本做任何修改。您可以下载 JS 文件并像任何其他 JS 文件一样链接它（我提供了指向源的链接），或者您可以将其复制并粘贴到 <script> 标记中，就像我在示例中所做的那样。
我刚刚在可拖动对象中发现了一个可能对其他人有所帮助的功能，如果您使用“距离 0”，即使您没有拖动窗口，它也会使用堆栈功能。 ``` $( ".ui-draggable" ).draggable({ cancel: '.text',stack: ".ui-draggable", distance: 0 }) ``` 你的函数仍然很有帮助，对于可拖动我想取消文本部分，以便有人可以在不拖动窗口的情况下突出显示和复制粘贴文本。因此，如果有人点击带有文本的 DIV 的一部分，它仍然不会出现在前面。
@jerdill - 这很奇怪，因为我能够突出显示窗口中的文本，唯一不能突出显示的文本是窗口标题。但是，嘿，我并不否认可能有其他方法可以实现您的目标！

【解决方案3】：

我发现这是可拖动“距离：0”的一部分，即使它没有被拖动，它也可以利用堆栈。

 $( ".ui-draggable" ).draggable({ cancel: '.text',stack: ".ui-draggable", distance: 0 })

如果使用取消部分来允许突出显示文本仍然不理想，因为您无法单击文本部分。但我想发布这个答案，以防这对其他人有帮助。上面的模拟答案似乎也适用于文本区域

【讨论】：