Javascript jQuery UI未检测到Dropable的第一个子项上的drop

我有一个

droppable

div

，其中包含不可

droppable

的子元素

出于某种原因，如果在第一个子元素上拖放，则不会触发

drop

事件，而是在第二个子元素上

下面是一个JSFIDLE示例：

为什么会这样？我怎样才能修好它

编辑：错误的小提琴

它实际上正在工作。看看当您删除

页边距顶部：50px

时会发生什么

.drag {
    padding: 10px;
    width: 25%;
    background-color: aqua;
}

如您所见，

边距

会影响放置计算

你可以一直玩着-

---

玩弄你的小提琴，问题似乎在于css

在我删除您的保证金后，请查看我的新小提琴：

---

啊。这是有道理的。非常感谢。

$('.drop').droppable({
    accept: '.drag',
    tolerance: "pointer",
    drop: function () {
        alert('dropped');
    }
});

.drag {
    padding: 10px;
    width: 25%;
    background-color: aqua;
}