How to make jScrollPane contents draggable

I'm using jScrollPane to create a "timeline" effect within a horizontally scrolling window.

Using jQuery UI, I've applied "draggable" to the content , thus making it draggable.

The two plugins are totally separate though, so I'm coming across issues such as jScrollPane not knowing where jQuery UI dropped the draggable element.

Is there a way to create this mouse dragging functionality, within jScrollPane rather than jQuery UI? It has a scrollbar which could surely be reused in some way for this purpose?

Solution

I've managed to work around this issue by making jQuery UI "draggable" let jScrollPane know when the content panel has been dropped:

// Make timeline draggable
jspPane.draggable({
    axis: 'x',
    cursor: 'e-resize',
    stop: function( event, ui ) {
        var offsetXPos = parseInt( ui.position.left );
        api.scrollToX(Math.abs(offsetXPos), false);
    },

    // Stop dragging at edges
    drag: function( event, ui) {

        var pos = ui.position.left;

        if (pos < -timelineWidth + 900 ) {
            jspPane.css('left', -timelineWidth + 900 );
            return false;
        }

        if ( pos >= 0 ) {
            jspPane.css('left', 0);
            return false;
        }

    }
});

Therefore, I can continue to use jQuery UI for the draggable content panel.

Making jScrollPanel natively provide this functionality would be preferred though.