jquery - 如何使 jScrollPane 内容可拖动

Question

我正在使用 jScrollPane 在水平滚动窗口中创建“时间线”效果。

使用 jQuery UI，我将“可拖动”应用于内容，从而使其可拖动。

这两个插件是完全独立的，所以我遇到了诸如 jScrollPane 不知道 jQuery UI 将可拖动元素放在哪里的问题。

有没有办法在 jScrollPane 而不是 jQuery UI 中创建这种鼠标拖动功能？它有一个滚动条，肯定可以为此目的以某种方式重用？

Answer 1

您可以在http://jsfiddle.net上上传一个包含完整 HTML、CSS 和 JavaScript 的示例吗？然后我们可以看看可以做什么。

Answer 2

我已经设法通过使 jQuery UI “可拖动”让 jScrollPane 知道内容面板何时被删除来解决这个问题：

// 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;
        }

    }
});

因此，我可以继续将 jQuery UI 用于可拖动内容面板。

不过，最好让 jScrollPanel 本机提供此功能。