Using jScrollPane with jQuery UI Draggable

An application that I’ve been working on recently makes heavy use of the jQuery UI library, particularly the draggable, sortable, and droppable modules. Users need to be able to sort a list of locations by dragging them within a fairly confined space. Since the area containing the list items has a fixed size, scrollbars appear when the list exceeds the bounds of the pane.

Normally, $.draggable( { scroll: true } ); is enough to get jQuery UI to work with the native browser scrollbars. For this particular project, the design called for custom scrollbars, which led me to Kelvin Luck’s jScrollPane jQuery plugin. Unfortunately, while jScrollPane allows us to style scrollbars however we wish, they doesn’t behave exactly like those native to the browser. In this case, jScrollPane wouldn’t scroll when $.draggable() was active. That meant that users wouldn’t be able to drag items from the top to the bottom if the list was taller than the containing element.

Since we didn’t want to abandon using jScrollPane, I had to get creative in order to get it to work. The solution I settled on involved creating some $.droppable() elements (div.scroll-trigger) that we could use to control jScrollPane on dropover and dropout (the mouseover and mouseout equivalents when using $.droppable()). Dragging a list item over .scroll-trigger will trigger a series of click.jsp events (jScrollPane uses jQuery’s namespaced events) on the appropriate .jspArrow element, causing the pane to scroll.

You can see a working example in this jsFiddle.

What are your thoughts? Have you had to deal with jQuery UI in jScrollPane (or any other scrollbar replacement script)? Please share your experiences in the comments and fork the jsFiddle with any improvements!