JQuery droppable container does not always capture drop event

Question

I have two possible options for using drag and drop using jQuery. In one case, disabling works, but only if you come close to the top of the .droppable div,

On another case, it just doesn't work.

I really cannot understand what the problem is, and both should work fine. I also tried playing with z-index, but decided nothing.

Answer 1

Thus, the problem was caused by a combination of the property: cursorAt , which I specifically assigned, which moves the helper to another location from the cursor, and the default setting is “tolerance” to droppable, which is the “Intersection” parameter.

If the Tolerance parameter is set to Intersection, it expects the dragging assistant to cross at least 50% of the container with the option to delete. And since I compensated for my assistant, he rarely overlapped correctly.

Changing the tolerance to the "pointer" forces it to accept only the pointer as a 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

Answer 2

I'm not sure that everything worked out for me, but ...

I added the clearfix class to your first example and it seems to work: http://jsfiddle.net/kboucher/4wBLG/

And I believe that the second example does not work at all, because the droppable container droppable actually next to the blue squares. (I assume that the blue square represents the area of ​​the drop area?)