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

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

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

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

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

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

Note:以下适用于 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. 最后，如果这一切都是真的，我们切换手柄
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.