Click to Front 和 DIV 堆叠问题

Question

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

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

 $('.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 nubmers 和 add/subtract 数字，那就太棒了。如果我有 7-8 windows 可以跟踪，可能会很快失控。

Answer 1

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

Answer 2

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

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

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

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

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

Answer 3

我发现这个内置于可拖动的“距离：0”的一部分将允许它使用堆栈，即使它没有被拖动。

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

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

Click to Front 和 DIV 堆叠问题

Trouble with Click to Front and DIV stacking

html

jquery

css

bringtofront