jQuery UI 可丢弃 - 容忍/贪婪无法按预期工作

Question

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

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

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

Answer 1

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

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

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

HTML和CSS是不变的，所以我不会再复制它们了

爪哇语

$('.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事件中，我将其删除。

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