jQuery UI 滑块 - 根据拖动方向选择重叠滑块

Question

我有这个简单的 jQuery UI 滑块设置，其中包含一个范围和两个重叠的默认值。整个事情（还有一些花里胡哨的东西）可以在这个jsfiddle中找到： http://jsfiddle.net/ yijian/XeyGS/

$('#slider').slider({
    min: 1,
    max: 11,
    range: true,
    values: [4, 4]
});

这样做的问题是，当您尝试将单个可见句柄拖动到右侧时，它会失败，因为 jQuery UI 总是将最小句柄放在顶部。由于多种原因，这显然很糟糕。

有没有办法让 jQuery UI 根据用户开始拖动的方向来选择拖动哪个手柄？

Answer 1

啊，我喜欢吃掉 11k 块，你也喜欢吗？ :)

注意： 下面是针对 jQuery UI 1.8.5

无论如何，这是一个非常干净的解决方案：

// add some stuff to the slider instance
this._handleIndex = null;
this._handleStartValue = -1; 

// remember the starting values in _mouseCapture
this._handleStartValue = this.values( this._handleIndex ); 
this._mouseDownOffset = this._normValueFromMouse( { x: event.pageX, y: event.pageY } );


// modify _mouseDrag
oldValue = this.values( this._handleIndex ),
curValue;

curValue = this.values(this._handleIndex);
if ( curValue === oldValue && this._handleStartValue !== -1 ) {
    if ( normValue - this._mouseDownOffset > 0
         && ( curValue === this.values( ( this._handleIndex + 1 ) % 2 ) )
         && oldValue === this._handleStartValue) {

        this._handleIndex = (this._handleIndex + 1) % 2;
    }

} else {
    this._handleStartValue = - 1
}

// reset everything in _mouseStop
this._handleIndex = null;
this._handleStartValue = -1; 

这就是它的全部内容，哦，当然，它是如何工作的：

1. 将起始鼠标偏移保存为以及初始选择手柄的值
2. 拖动时将旧值与活动手柄的当前值进行比较，并检查起始位置是否有效
3. 如果没有差异，我们检查如果活动手柄可以的话是否会有差异进一步拖动
4. 如果是这种情况，我们检查两个手柄是否具有相同的值，这意味着它们位于彼此之上
5. 现在我们检查当前选定的手柄是否尚未被拖动
6. 最后，如果所有这些都是 true，我们切换手柄
7. 如果用户现在更改了值，我们会使起始位置无效，这样就不再需要在手柄之间进行切换

为了您的方便，这里有一个 diff：

9960c9960,9962
< 
---
>       
>       this._handleIndex = null;
>       this._handleStartValue = -1; 
10215a10218,10219
>         this._handleStartValue = this.values( this._handleIndex ); 
>       this._mouseDownOffset = this._normValueFromMouse( { x: event.pageX, y: event.pageY } );
10243c10247,10249
<           normValue = this._normValueFromMouse( position );
---
>           normValue = this._normValueFromMouse( position ),
>           oldValue = this.values( this._handleIndex ),
>           curValue;
10246c10252,10263
< 
---
>       curValue = this.values(this._handleIndex);
>       if ( curValue === oldValue && this._handleStartValue !== -1 ) {
>           if ( normValue - this._mouseDownOffset > 0
>                && ( curValue === this.values( ( this._handleIndex + 1 ) % 2 ) )
>                && oldValue === this._handleStartValue) {
>             
>               this._handleIndex = (this._handleIndex + 1) % 2;
>           }
>         
>       } else {
>           this._handleStartValue = - 1
>       }
10257a10275,10276
>       this._handleStartValue = -1; 
>       this._handleIndex = null;

将其保存到 ui.diff 然后执行patch -i ui.diff jquery-ui.js。

Answer 2

向 Ivo 致歉，他的非常好答案 我确信我花了很多努力来创建。问题是我无法应用该解决方案，因为我已经使用了 1.8.6，我无法在任何地方找到 1.8.5 源代码来应用它，而且不知何故我无法让补丁发挥作用对于 1.8.6，即使我尝试手动添加行。

以下是我对问题的解决方案。它比 Ivo 的简单，但这可能是因为两个点版本之间的差异。解决方案如下：

1. 拼接一个附加变量来跟踪原始值
2. 当满足条件时（两个句柄，相同值，新值大于当前值），翻转一个内部变量（_handleIndex) 周围，导致最大句柄被用作内部 _slide 函数的参考，而不是第一个。

diff 如下：

46a47,48
>       
>       this._originalVal;
310a313,314
>       
>       this._originalVal = this.values();
323a328,331
>       
>       if(this._originalVal[0] === this._originalVal[1] && normValue > this._originalVal[0]){
>           this._handleIndex = 1;
>       }

第一部分应插入到声明变量的初始化区域中，第二部分应插入到调用 _mouseCapture 函数之前>_slide，以及 _mouseDrag 函数的最后一部分，也在调用 _slide 之前。

以下是该补丁的工作示例：http://www.jsfiddle.net/HcGXZ/

可以在此处找到已修补的 jQuery UI 1.8.6 Slider 文件的副本： http://dl.dropbox.com/u/1722364/jQuery%20UI%20Slider%20Patch/jquery.ui.slider.patched.js

与往常一样，此补丁尚未经过广泛测试，并且不保证适用于所有场景。

Answer 3

我想说这是一个错误，更是如此，因为当两个滑块手柄都位于最小/最左侧位置时，已经有逻辑防止发生“死锁”：

// workaround for bug #3736 (if both handles of a range are at 0,
// the first is always used as the one with least distance,
// and moving it is obviously prevented by preventing negative ranges)
if( o.range === true && this.values(1) === o.min ) {
  index += 1;
  closestHandle = $( this.handles[index] );
}

它看起来像 ticket #3736 仍然开放，其中提到了您遇到的具体问题。

Answer 4

我尝试了易江的解决方案 使用 1.8.12 时，它在带有单个手柄的滑块上破裂，但在我更改

this._originalVal = this.values();

为

this._originalVal = this.options.values === null ? this.value() : this.values();

Answer 5

将其放入声明变量的初始化区域：

this._originalVal;

将其放入调用_slide之前的_mouseCapture函数中：

this._originalVal = this.values();

并将其放入_mouseDrag code> 函数，也在调用 _slide 之前，

if (this._originalVal[0] === this._originalVal[1]
      && normValue > this._originalVal[0]) {
    this._handleIndex = 1;
} else if (this._originalVal[0] === this._originalVal[1]
             && normValue < this._originalVal[0]) {
    this._handleIndex = 0;
}

我刚刚在上面的代码中添加了一个 else if ；它在 jQuery 1.8.14 中工作正常
左右按钮处理程序。

Answer 6

另一个解决方案：
测试这两个值，如果它们相同，则返回到最后一步。

 $("#slider").slider({ 
            range:true, 
            min:0, 
            max:250,
            step: 25,
            slide: function( event, ui ) {
                if (ui.values[0] == ui.values[1]){
                    return false;
                }else{
                    $( "#amount" ).html( "€" + ui.values[0] + " - €" + ui.values[1] );
                }
            }
      });

Answer 7

的新版本

这是 jQuery UI 1.10.2补丁文件

： http://pastebin.com/Dsxw8NYR完整文件： http://pastebin.com/ibSpAAX1