jQuery droppable 容器并不总是捕获 drop 事件

我有两个使用 jQuery 拖放的可能用例。
在一个 case 中，drop 有效，但前提是您密切瞄准 .droppable div 的顶部，

在另一个 case 上它永远不会工作。

我真的看不出这里有什么问题，两者都应该可以正常工作。我也尝试过使用 z-index ，但这并不能解决任何问题。

最佳答案

所以这个问题是由属性的组合引起的:我故意偏移的 cursorAt，它将助手移动到与光标不同的位置，以及设置为相交的 droppable 上的默认选项“tolerance”。

当容差设置为 Intersect 时，它等待可拖动助手与可放置容器相交至少 50%。而且由于我正在抵消我的助手，因此很少正确重叠。

将可放置容差更改为“指针”会强制它仅接受指针作为可拖动目标。

var taskSelected = $("#tablecontainer tr.selected").length;

$("#tablecontainer tr.selected").draggable({
    cursor: "move",
    cursorAt: { top:-12, left: -20 },
    helper: function(event) {
        return $("<div class='ui-widget-header'>" + taskSelected  + " Tasks selected.</div>");
    }
});

$(".featureOrgDataWrapper .droppable").droppable({
    activeClass: "ui-state-highlight"
    , tolerance: "pointer"
    , drop: function (event, ui) {
        alert("success");
    }
});

工作版本:#1 和 #2

关于jQuery droppable 容器并不总是捕获 drop 事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12964144/