jQuery UI droppable outside the visible area of a jScrollpane catches drop event

Question

I have two adjacent jScrollPanes that contain droppable li elements. The first div is above the second (on the y-axis), so the overflow from the top one flows "under" the one below it (both are overflow:hidden). The problem is that when I drop a draggable element into the lower jScrollPane, the event is caught by the droppable elements in both the upper and lower, even though the element in the upper is outside of the visible area of its container.

How do I prevent the "hidden" elements (those outside of the scrollpane) from catching the drop event? I've tried inserting logic to test if the droppable is :hidden or :visible, but that didn't work. Playing with the z-index didn't work either. I wanted to delegate the droppable() handler to the container, rather than have it on the li, but that's not supported.

Answer 1

I solved this problem by using this answer and modifying it to work with jScrollPane. The difference is that there are two different parents you need to take into consideration. The size of the "parent" as referenced in the other solution can be gotten from $(this).closest(".jspContainer"), but you also need to take into account the offset of the viewable region. If you're only scrolling vertically, the offset is parseInt(#(this).closest(".jspPane").css("top").