jQuery UI Sliders - 根据拖动方向选择重叠滑块 [英] jQuery UI Sliders - Select overlapping sliders based on dragging direction

问题描述

我有这个简单的jQuery UI Slider设置，其中包含一个范围和两个重叠的默认值。整个事物（有一些铃声和口哨声）可以在这个jsfiddle中找到： http://jsfiddle.net/ yijiang / XeyGS /

I have this simple jQuery UI Slider setup with a range and a two default values that overlap. The entire thing (with a few bells and whistles) can be found in this jsfiddle: http://jsfiddle.net/yijiang/XeyGS/

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

这个问题是，当您尝试向右拖动单个可见句柄时，它会失败，因为jQuery UI始终将最小句柄置于顶部。出于多种原因，这显然是不好的。

The problem with this is that when you attempt the drag the single visible handle to the right, it fails, because jQuery UI always places the minimum handle on top. This is obviously bad, for a number of reasons.

有没有办法让jQuery UI根据用户开始拖动的方向选择要拖动的句柄？

Is there a way to allow jQuery UI to choose which handle to drag depending on which direction the user starts dragging?

推荐答案

啊，我喜欢吃11k libs，不是吗？ ：）

Ah, I like it to eat through 11k libs, don't you too? :)

注意：以下内容适用于jQuery UI 1.8.5

Note: The following is for jQuery UI 1.8.5

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

Anyways, here's a pretty clean solution:

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

这就是它的全部，哦当然如何运作：

And that's all there is to it, oh how it works, of course:

1. 保存起始鼠标偏移量以及初始选择句柄的值


2. 当拖动比较旧值时活动句柄的当前值以及检查开始位置是否有效


3. 如果没有区别，我们检查是否可以进一步拖动活动句柄


4. 如果是这种情况，我们检查两个句柄是否具有相同的值，这意味着它们是彼此重叠的


5. 现在我们检查是否当前选择的句柄尚未被拖动


6. 最后如果一切正确，我们切换句柄


7. 如果用户现在更改了价值我们使我们的起始位置无效，因此手柄之间不再有切换

1. Save the starting mouse offset as well as the value of the initially select handle
2. When dragging compare the old value to the current value of the active handle and also check whether the start position is valid
3. In case there's no difference we check whether there would be a difference if the active handle could be dragged further
4. If that's the case we check whether both handles have the same value, that means they're on top of each other
5. Now we check if the the currently selected handle hasn't been dragged yet
6. And finally if all that is true, we switch the handles
7. In case the user now changes the value we invalidate our start position so that there's no more switching between the handles

为了您的乐趣，这里有一个 DIFF ：

And for your pleasure here's a 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 。

这篇关于jQuery UI Sliders - 根据拖动方向选择重叠滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！