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

啊,我喜欢吃11千里布,你不也是吗?:)

注: 以下是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. 如果没有区别,我们检查如果活动句柄可以被进一步拖动,是否会有区别
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 .

向伊沃道歉 excellent answer 我肯定是花了很多功夫才创造出来的。问题是我无法应用该解决方案,因为我已经在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 在调用 _幻灯片 _mouseDrag 函数,也在调用 _幻灯片 .

以下是修补程序的工作示例: http://www.jsfiddle.net/HcGXZ/

http://dl.dropbox.com/u/1722364/jQuery%20UI%20Slider%20Patch/jquery.ui.slider.patched.js

一如既往,这个补丁没有经过广泛的测试,也不能保证适用于所有的场景。

我想说这是一个bug,双重原因是当两个滑动手柄都在最小/最左边位置时,已经有了防止死锁发生的逻辑:

// 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

我试过了 Yi Jiang's solution 使用1.8.12时,它在一个单手柄的滑块上断裂,但在我更换之后工作得很好

this._originalVal = this.values();

到

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

将其放入初始化区域,其中声明变量:

this._originalVal;

把这个放进 _mouseCapture 在调用 _slide :

this._originalVal = this.values();

然后这个进入 _mouseDrag _幻灯片

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中可以正常工作 左右按钮处理程序。

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

 $("#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] );
                }
            }
      });

以下是jQuery UI 1.10.2的新版本

http://pastebin.com/Dsxw8NYR

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