jquery-ui - jQuery UI droppable - 宽容/贪婪不按预期工作

Question

当我拖动可拖动对象时，包含可放置对象的元素不断被触发(因为它也是可放置对象)，即使它位于可放置对象后面并且它们彼此堆叠在一起。它的表现就像可放置物体之间有间隙，但其实根本没有间隙。

我做了an example on jsFiddle这是the screenshot of the offending behavior .

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

Answer 1

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

不幸的是，浏览器的 react 确实就像在这些 .child 元素之间有一些空间，足以触发 的 *over 事件。父级。我想到的唯一想法是尝试检测当 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 类。

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

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