拖动元素(Jquery Ui)时出现两个div可丢弃项的问题

Question

Jquery Ui Droppable有问题。

我在一个div容器中有两个div滴管，当我选择紫色框并将其先拖到第二个div，然后再拖到第一个div时，div容器和第一个div一起被选中，这就是我遇到的错误，在JsFiddle中，当我在它上面时，它周围会变成红色。我在互联网上四处寻找，但找不到解决方案。如果我把紫色框拖到第一个div，然后拖到第二个div，它可以正常工作，但不能反过来。我附上了一张照片JsFiddle中显示错误谢谢

Js报价：https://jsfiddle.net/7unvxgqo/

$(document).ready(function () {

$("#draggable2").draggable({
// opacity : 0.7, 
helper: "clone",
scope: 1,
start: function (e, ui) {
$(ui.helper).addClass("drag-helper");
//console.log(ui);
}
});

$(".draggable3").droppable({
greedy: true,
tolerance: 'pointer',
scope: 1

});

$("#droppable").droppable({
//Over
greedy: true,
tolerance: 'pointer',
scope: 1
})
});

图片：

在第一个div 中拖动元素时，红色边框处于活动状态

Answer 1

一个解决方案可能是在两个嵌套元素之间添加一个小的边距。

示例：https://jsfiddle.net/Twisty/aL32ru7d/16/

HTML

<div id="draggable2" class="draggable">
</div>
<div class="container">
<div id="drop-1" class="drop-zone">
<p>Drop here</p>
<div id="drop-nest-1" class="drop-nest">
<p>First Div</p>
</div>
<div id="drop-nest-2" class="drop-nest">
<p>Second Div</p>
</div>
</div>
</div>

CSS

.drop-nest {
width: 100%;
height: 100px;
background: #0066CC;
border: 2px solid #00FF00;
margin-bottom: 6px;
}
#draggable2 {
height: 100px;
width: 100px;
background-color: #CC33CC;
margin-bottom: 3em;
}
.drop-zone {
width: 100%;
height: 500px;
padding: 0;
border: 5px solid black;
background-color: #777;
margin: 0px !important;
}
.drag-helper {
width: 50px;
height: 50px;
padding: 0px;
border: 5px solid gray;
background-color: #CC33CC;
}
.container {
width: 100%;
padding: 0px !important;
margin: 0px !important;
}
.my-hover {
border: 5px dashed #FF0000 !important;
}
body,
html {
margin: 0px;
}

JavaScript

$(function() {
$("#draggable2").draggable({
// opacity : 0.7, 
helper: "clone",
scope: 1,
start: function(e, ui) {
$(ui.helper).addClass("drag-helper");
}
});
$(".drop-zone, .drop-nest").droppable({
greedy: true,
tolerance: 'pointer',
scope: 1,
over: function(e, ui) {
$(this).addClass("my-hover");
},
out: function(e, ui) {
$(this).removeClass("my-hover");
}
});
});

该问题似乎与greedy选项和out有关。在一瞬间，鼠标位置触发两者来检测over。留出一点空间可以让鼠标选择其中一个元素，而不是同时选择两个元素。这里需要注意的是，如果鼠标移动得很快，它仍然可能引发问题。

我选择了6px，但我测试了许多值。间隙越小，就越容易触发。