带有可拖动帮助器的奇怪的可放置悬停效果

Question

I'm testing around with jQuery draggables and droppables and have a question about the hover behaviour of droppable and clones of a draggable.

The documentation says that the draggable item has to overlap the droppable at least 50% to fire the over-event (default tolerance). This works exactly like described if I drag the item itself.

If I drag a clone of the item, the 50% rule doesn't work. In this case the clone has to overlap the droppable quite 100% if I'm dragging vertically from the top. If I'm dragging the clone from the left side, the hover-event will fire very early at 10%.

How does this come up?

 $("#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

解决方案：id =“ eins”的class =“ eins” intead。