(JSFiddle at the bottom)
In an application I'm developing, the user can map jQuery UI draggable items from a flat list onto a tree where the leaf nodes are jQuery UI droppables. The items from the flat list can be mapped one by one, but a user can also use multiselect to grab an arbitrary number of items and drop them onto the same droppable in one go.
When the user selects a large number of items, the draggable helper becomes pretty long. This causes problems when trying to drop the items on a node that is near the bottom of the tree.
The behavior I'm after is to drop the items on the leaf node (droppable) that the mouse cursor is currently on. This seems to work in all cases except for when you reach the bottom of the list. The cursor will move down but the draggable will stay where it is (it can't go any further). Instead of dropping on the droppable that the mouse cursor is on, the draggable will be dropped on the droppable that is below where the mouse cursor is expected to be (based on the cursorAt attribute), or at least so it seems.
I have tried a number of settings and alterations but I cannot get a grip on this behavior. Most solutions I find using search point to the tolerance: "pointer" setting on the droppable, but I already use that and it doesn't fix the problem. My helper clones the draggable and sets 'pointer-events: none' on it, but that doesn't seem to matter either (I can just as well remove the helper function and the behavior is the same).
Is this a bug? Is there a way to fix it? Help would be greatly appreciated. Let me know if more info is needed. Thanks!
JSFiddle reproducing the problem: http://jsfiddle.net/1odvbmah/4/
Edit: Disclaimer: The JSFiddle is the simplest way I could reproduce the problem. Therefore, some things don't exactly work as in the real case. I stuck the droppable container on the bottom to restrict the draggable. In the real case, the list of droppables is scrollable but the draggable can't go beyond the bottom of that list. The resulting behavior is exactly the same. So a small CSS change is not a fix for my real problem :)
Second edit: changing the cursorAt value is not the solution either. In the real case, the draggable can become taller than the screen height, and the tree control (with the droppables) is almost the full page height.
As it turns out, this is indeed a bug in jQuery UI. I hadn't found it since I looked for the bug in jQuery, but obviously drag/drop is in UI.
The bug has recently been fixed. The fix also solves my issue.