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

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 libs,不是吗？:)

注意:以下内容适用于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.

Answer 2

我想说这是一个错误，尤其是因为当两个滑块手柄都位于最小/最左侧位置时，已经有逻辑阻止 \xe2\x80\x98deadlock\xe2\x80\x99 发生：

\n\n

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

\n\n

工单 #3736似乎仍处于开放状态，其中提到了您遇到的具体问题。

\n