So the issue was caused by a combination of the property: cursorAt
that I've offset on purpose, which moves the helper to a different location from the cursor, and the default option "tolerance" on the droppable which is set to Intersect.
When tolerance is set to Intersect, it awaits for the draggable helper to intersect at least 50% with the droppable container. And since I was offsetting my helper it was rarely overlapping correctly.
Changing the droppable tolerance to "pointer" forces it to only accept the pointer as the draggable target.
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");
}
});
Working versions: #1 and #2