jquery-ui - jQuery UI Droppable-公差/贪婪无法按预期工作

当我拖动可拖动对象时，包含可放置对象的元素会不断被触发（因为它也是可放置对象），即使它位于可放置对象的后面并且彼此堆叠在一起。它的表现就像是可滴液之间存在间隙，而没有间隙。

我做了an example on jsFiddle，这里是the screenshot of the offending behavior。

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

最佳答案

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

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

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

HTML和CSS保持不变，因此我不会再复制它们

Java脚本

$('.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事件上，我删除了它。

行为仍然有些不尽人意，但是此替代方法应该可以解决问题。