jQuery droppable container not always catching the drop event

Question

I have two possible use case of drag and drop using jQuery. In one case the drop works but only if you closely target the top of the .droppable div,

On the other case it just never works.

I really can't see what the problem is here, both should work just fine. I've tried playing with z-index as well but that's not solving anything.

Answer 1

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