创建多个可放置的兄弟姐妹,它们位于彼此的顶部

Question

我试图在彼此旁边创建多个jquery droppable,其中一些部分可能重叠,在这些情况下,我希望顶部的那个(z-index wise)是贪婪的.

我已经尝试greedy: true在droppable中设置选项,但这似乎没有帮助.我也尝试过return falsedrop事件并使用了event.stopPropagation();.

这是一个基于jquery 的演示页面的jsfiddle.

有没有办法阻止drop事件传播,如果有另一个droppable触发它,最好是具有最高z-index的那个？

Answer 1

用于document.elementFromPoint直接检查光标下的元素.如果不是你的辍学,不要做任何事情.将以下内容添加到drop:处理程序的顶部:

var droppable = $(this);
ui.helper.css({pointerEvents: 'none'});
var onto = document.elementFromPoint(event.clientX, event.clientY);
ui.helper.css({pointerEvents: ''});
if(!droppable.is(onto) && droppable.has(onto).length === 0) {
    return;
}

在助手上禁用指针事件是必要的,document.elementFromPoint可以忽略你拖动的东西,只检查下面的东西.我已经更新了你的jsFiddle以进行快速演示.请注意,突出显示仍会影响这两个元素.您应该能够通过不让jQuery UI进行突出显示来改变它,而是自己在draggables drag:事件上编写它.但是,我发现这在实践中无法使用,因为此检查(和禁用指针事件)非常慢并且还可能导致闪烁.

Answer 2

如果我遇到这个问题，我会使用 jQuery 的 .addclass

.droppablewidgetforce {
z-index: 1000 !important; 
}

创建一个这样的类，以便该层无论如何都保持在顶部..这应该可以解决问题。