Jquery ui jQuery UI可拖放-容差/贪婪未按预期工作

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

我做了，这是我的

---

如果我将填充添加到.parent（例如

padding:0.2em 0.2em 0em 0.2em

这种行为更糟糕。

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

不幸的是，看起来浏览器的反应就像是在那些

.child

元素之间有一些空间，足以触发

.parent

的

*over

事件。我想到的唯一想法是，当

下拉事件在父元素上触发时，尝试检测鼠标位置是否正确y在子元素中。如果是这样，则应将
接受\u drops
类指定给子元素，而不是父元素

下面是代码（我做了一个示例来展示我的解决方案的实际效果）：

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");
});

$（'.dragme'）。可拖动({
助手：“克隆”
});
$（'.parent，.child'）。可拖放({
贪婪：没错，
公差：“指针”，
});
$（“.parent”）。在（“dropover”上，函数（事件，ui）{
var first=$（“.child:first”）；
var last=$（“.child:last”）；
如果（（event.originalEvent.pageX>first.offset（）.left）&&
（event.originalEvent.pageY>first.offset（）.top）&&
（event.originalEvent.pageX很棒的演示。我遇到了同样的问题：\