Question

我一直在修改此插件：http://andreruffert.github.io/rangeslider.js/以便它可以垂直工作而不是水平工作。

我还设法让它以正确的相反顺序定位填充和处理。因此，例如，如果我将值设置为75，则将其设置为顶部而不是底部。

但是我在点击和拖动时很难做到这一点。目前，如果我点击滑块的顶部，它会将值设置为0，如果我向下拖动，手柄将向上移动。所以它需要反过来做这些。

这是我到目前为止的一个小提琴：http://jsfiddle.net/g7yhLkt1/

问题似乎位于以下两个方面：

Plugin.prototype.handleDown = function(e) {
    e.preventDefault();
    this.$document.on(this.moveEvent, this.handleMove);
    this.$document.on(this.endEvent, this.handleEnd);

    // If we click on the handle don't set the new position
    if ((' ' + e.target.className + ' ').replace(/[\n\t]/g, ' ').indexOf(this.options.handleClass) > -1) {
        return;
    }

    var posY    = this.getRelativePosition(e),
        rangeY  = this.$range[0].getBoundingClientRect().top,
        handleY = this.getPositionFromNode(this.$handle[0]) - rangeY;

    this.setPosition(posY - this.grabY);

    if (posY >= handleY && posY < handleY + this.handleHeight) {
        this.grabY = posY - handleY;
    }
};

Plugin.prototype.handleMove = function(e) {
    e.preventDefault();
    var posY = this.getRelativePosition(e);
    this.setPosition(posY - this.grabY);
};

两者都使用setPosition函数（看起来很好，好像我手动设置值然后它在正确的位置）。所以它似乎会为点击和拖动传递不正确的值。他们也都使用getRelativePosition函数来获取相对于滑块的位置。

getRelativePosition函数如下所示：

Plugin.prototype.getRelativePosition = function(e) {
    // Get the offset left relative to the viewport
    var rangeY  = this.$range[0].getBoundingClientRect().top,
        pageY   = 0;

    if (typeof e.pageY !== 'undefined') {
        pageY = e.pageY;
    }
    else if (typeof e.originalEvent.clientY !== 'undefined') {
        pageY = e.originalEvent.clientY;
    }
    else if (e.originalEvent.touches && e.originalEvent.touches[0] && typeof e.originalEvent.touches[0].clientY !== 'undefined') {
        pageY = e.originalEvent.touches[0].clientY;
    }
    else if(e.currentPoint && typeof e.currentPoint.y !== 'undefined') {
        pageY = e.currentPoint.y;
    }
    return pageY - rangeY;
};

我不太确定哪个功能对我来说有问题需要修改。有什么想法吗？

Answer 1

您需要更改代码的两行。

在＆＃39; Plugin.prototype.handleDown＆＃39; 方法中，您需要将this.setPosition(posY - this.grabY);行更改为this.setPosition(this.maxHandleY - (posY - this.grabY));

在＆＃39; Plugin.prototype.handleMove＆＃39; 方法中，您需要将this.setPosition(posY - this.grabY);行更改为this.setPosition(this.maxHandleY - (posY - this.grabY));

演示：http://jsfiddle.net/g7yhLkt1/5/

反转音量控件的滑块插件

1 个答案: