jquery-ui - jQuery UI droppable - 容忍/贪婪没有按预期工作

Question

当我拖动可拖动对象时，包含可放置对象的元素不断被触发（因为它也是可放置对象），即使它位于可放置对象后面并且它们彼此堆叠。它的行为就像droppables之间有一个间隙，并且没有一个。

我在 jsFiddle 上做了一个例子，这里是违规行为的截图。

如果我向 .parent 添加填充（例如padding: 0.2em 0.2em 0em 0.2em，行为会更糟。

Answer 1

首先，我希望你在这几个月里找到了解决方案，我正在回答这个问题，因为我在这段时间使用 jQueryUI，我认为尝试找到答案是一个很好的练习。另外，我讨厌没有答案的问题^_^

不幸的是，看起来浏览器的反应好像在这些.child元素之间有一些空间，足以*over触发.parent. 我想出的唯一想法是尝试检测当dropover事件在父元素上触发时，鼠标位置是否实际上在子元素内。如果是这样，您应该将accepting_drops类​​赋予子元素而不是父元素。

这是代码（我制作了一个jsFiddle来展示我的解决方案）：

HTML 和 CSS 原封不动，不再复制

Javascript

$('.dragme').draggable({
    helper: 'clone' 
});

$('.parent,.child').droppable({
    greedy: true,
    tolerance: 'pointer',
});

$(".parent").on("dropover", function(event, ui) {
    var first = $(".child:first");
    var last = $(".child:last");

    if((event.originalEvent.pageX > first.offset().left) &&
        (event.originalEvent.pageY > first.offset().top) &&
        (event.originalEvent.pageX <= (last.offset().left + last.width())) &&
        (event.originalEvent.pageY <= (last.offset().top + last.height()))) {
        $(this).removeClass("accepting_drops");
    }
    else {
        $(this).addClass("accepting_drops");
        $(".child").removeClass("accepting_drops");
    }
}).on("dropout", function() {
    $(this).removeClass("accepting_drops");
});

$(".child").on("dropover", function() {
    $(".parent").removeClass("accepting_drops");
    $(".child").removeClass("accepting_drops");
    $(this).addClass("accepting_drops");
}).on("dropout", function() {
    $(this).removeClass("accepting_drops");
});

我删除了该hoverClass: 'accepting_drops'行，因为我们覆盖了可拖动组件的默认行为。对于父 div，如果当dropover事件触发时我也在子元素中，我会accepting_drops从中删除该类，否则我会从任何可以拥有它的子元素中删除它并将其添加到父元素中。当一个dropout事件触发它时，我删除了这个accepting_drops类。

对于孩子来说，行为几乎是标准的，在dropover事件中我accepting_drops从其他所有内容中删除类并将其添加到孩子，在dropout事件中我将其删除。

这种行为仍然有点神秘，但是这种解决方法应该可以解决问题。