当我拖动draggable时，包含droppables的元素会一直被触发（因为它也是一个droppable），即使它位于droppables后面并且它们彼此堆叠在一起。它的行为就像droppables之间存在差距，而且没有一个。
我已经an example on jsFiddle，而the screenshot of the offending behavior。
如果我向.parent添加填充（例如padding: 0.2em 0.2em 0em 0.2em，行为会更糟。
答案 0 :(得分：1)
首先，我希望你在这几个月找到了一个解决方案，我正在回答这个问题，因为我在这个时期正在使用jQueryUI，我认为尝试寻找答案是一个很好的练习。另外，我讨厌未回答的问题^ _ ^
不幸的是，看起来浏览器看起来好像在这些.child元素之间有一些空间，足以触发*over的{{1}}事件。我想出的唯一想法是尝试检测当.parent事件在父项上触发时，鼠标位置实际上是否在子元素内。如果是这样，您应该将dropover类赋予子元素而不是父元素。
这是代码（我制作了一个jsFiddle来展示我的解决方案）：
HTML和CSS没有改变，所以我不会再复制它们
的Javascript
accepting_drops我删除了$('.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");
});
行，因为我们覆盖了可拖动组件的默认行为。对于父div，如果hoverClass: 'accepting_drops'事件触发我也在子元素中，我会从中移除dropover类，否则我将其从可能拥有它的任何孩子中删除并添加它而是父母。当accepting_drops事件触发时，我会移除dropout类。
对于孩子，行为几乎是标准的，在accepting_drops事件中我从其他所有内容中移除dropover类并将其添加到孩子，我删除的accepting_drops事件它
这种行为仍然有些神秘，但这种解决方法应该可以解决问题。