How to make jScrollPane contents draggable

Question

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?

Answer 1

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.

Answer 2

Can you upload a sample at http://jsfiddle.net with complete HTML, CSS and JavaScript used? We can then take a look to see what can be done.