带有可拖动 Helper 的奇怪的 droppable Hover-Effect

Question

我正在测试 jQuery draggables 和 droppables，并且对 droppable 的悬停行为和可拖动的克隆有疑问。

文档说可拖动项必须与可放置项重叠至少 50% 才能触发过度事件（默认容差）。如果我拖动项目本身，这与描述的完全一样。

如果我拖动项目的克隆，则 50% 规则不起作用。在这种情况下，如果我从顶部垂直拖动，则克隆必须与 droppable 重叠 100%。如果我从左侧拖动克隆，悬停事件将在 10% 时很早就触发。

这是怎么出现的？

$("#eins").draggable({
            helper: "clone",
            opacity: 0.7,
            drag: function(event,ui) {
                     $(ui.helper).addClass("clone")
                },
            stop: function (event, ui) {
                    console.log("Dragging stoped")
                }
})

$("#zwei").droppable({
            classes: {"ui-droppable-hover": "draggableHover"},
            tolerance: "intersect",
            over: function(event, ui) {
                    console.log("hover")
                },
            drop: function (event, ui) {
                    console.log("dropped")
                }
})

#eins, .clone {
   background: coral;
   height: 100px;
   width: 100px;
   margin: 0px;
}

#zwei {
   background:lightgreen;
   height:100px;
   width: 100px;
   margin: 0px;
}

.draggableHover {
   background: rgb(230, 250, 230) !important;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div id="eins">
   eins
</div>
<div id="zwei">
   zwei
</div>

Answer 1

解决方案：class="eins" 而不是 id="eins"。