javascript - jQuery UI Sliders - 根据拖动方向选择重叠的 slider

Question

我有一个简单的 jQuery UI Slider 设置，其中包含一个范围和两个重叠的默认值。可以在这个 jsfiddle 中找到整个东西(带有一些花里胡哨的东西):http://jsfiddle.net/yijiang/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. 最后，如果所有这些都是真的，我们交换句柄
7. 如果用户现在更改值，我们会使起始位置无效，这样 handle 之间就不会再切换

为了您的愉快，这里有一个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。