If you’re working on a site using jQuery UI, the Draggable, Droppable, and Sortable built in functionality can save a lot of time making a web application interface dynamic. As such they’ve become a mainstay for millions of websites.
However I recently came across a frustrating issue with the scope of droppable drop targets which caused (in my opinion) unexpected behaviour. In short, droppable elements which were hidden by a parent container boundaries with overflow: auto or overflow: hidden were still triggering the droppable functionality regardless of whether the drop target was visible or not. Not only does this cause unexpected behaviour when dealing with a fairly basic list of droppables, it causes even more confusion if you place multiple lists of droppables together as the drop event will then be fired on multiple elements (after bug fix #6009, anyway).
Here is a simple demonstration of the problem – try moving the draggable element around the list of droppables and see the problem.
After lots of searching and trial and error, I came up with the solution of checking whether the mouse event was within the boundary of the parent element on every drag start, end or drop event. This does mean handling the hover classes yourself, but that gives you more granular control anyway!
Feel free to use this code, or comment with a better technique!