Question

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

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

这两个插件完全是分开的，所以我遇到了诸如jScrollPane之类的问题，不知道jQuery UI在哪里删除了可拖动元素。

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

Answer 1

您可以使用完整的HTML，CSS和JavaScript在http://jsfiddle.net上传样本吗？然后我们可以看看可以做些什么。

Answer 2

我设法解决了这个问题，让jQuery UI“draggable”让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提供此功能。

如何使jScrollPane内容可拖动

2 个答案: