Question

我有两个使用jQuery拖放的用例。在一个case中，只有当您紧密定位.droppable div的顶部时才会有效，

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

我真的看不出这里的问题，两者都应该工作得很好。我也尝试过使用z-index，但这并没有解决任何问题。

Answer 1

所以这个问题是由一个属性组合引起的：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

Answer 2

我不确定我是否正确，但......

我在第一个示例中添加了clearfix课程，它似乎有效：http://jsfiddle.net/kboucher/4wBLG/

我相信第二个例子根本不起作用的原因是因为droppable容器实际上在蓝色方块旁边。（我猜蓝色sqaure代表可放置的区域？）

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

2 个答案: