1

我正在尝试设置一个类似于 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 个窗口要跟踪，可能会很快失控。

4

3 回答 3

1

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

于 2020-10-06T02:24:55.833 回答
0

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

如果您将此脚本合并到您网站的某个地方，那么您可以更改您的$('.window').click(function(){})身份；

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

你可以在这里看到一个工作演示：https ://jsfiddle.net/rf7cowe3/

基本上，似乎该类.ui-front正在破坏可拖动的整个stack功能 - 所以我必须找到一种方法来触发单击时的“拖动”事件，以便它欺骗该函数以适当地对 z-indexes 进行排序。

于 2020-10-06T05:52:13.567 回答
0

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

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

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

于 2020-10-07T14:52:39.990 回答