创建位于彼此顶部的多个可放置的同级 [英] Creating multiple droppable siblings that at positioned on top of eachother

问题描述

我试图在彼此相邻的地方创建多个jquery droppable，其中某些部分可能重叠，在这种情况下，我希望最上面的那个(贪婪地使用z-index).

I am trying to create multiple jquery droppables next to eachother where some parts might overlap, in these cases I want the one that is on top (z-index wise) to be greedy.

我尝试在droppable中设置greedy: true选项，但这似乎无济于事.我也尝试在放置事件上使用return false并使用了event.stopPropagation();.

I have tried setting the greedy: true option in the droppable, but this does not seem to help. I have also tried to return false on the drop event and used event.stopPropagation();.

这是基于是否有任何方法可以阻止drop事件的传播，如果还有另一个droppable触发该事件，最好是具有最高z-index的dropp?

Is there any way to stop the drop event from propagating if there is another droppable triggering it, preferably the one that has the highest z-index?

推荐答案

使用document.elementFromPoint检查光标正下方的元素.如果不是您的可丢弃物品，请勿执行任何操作. 将以下内容添加到drop:处理程序的顶部:

Use document.elementFromPoint to check the element directly under the cursor. If it’s not your droppable, don’t do anything. Add the following to the top of your drop: handler:

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:事件上编写突出显示来更改它.但是，我发现这在实践中不可用，因为此检查(以及禁用指针事件)的速度很慢，并且还可能导致闪烁.

Disabling pointer events on the helper is necessary for document.elementFromPoint to ignore the thing your dragging and only checking underneath. I’ve updated your jsFiddle for a quick demonstration. Note that the highlight still affects both elements. You should be able to change that by not letting jQuery UI do the highlighting but instead write it yourself on the draggables drag: event. I have, however, found this to be unusable in practice as this check (and disabling pointer events) is quite slow and may also cause flickering.

这篇关于创建位于彼此顶部的多个可放置的同级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！