selectToUISlider：右滑块重叠问题

Question

如果你去这里：http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support//

然后单击并将第二个滑块拖动到第一个滑块的上方，松开，然后尝试将第二个手柄滑回右侧，它不会让你。它只会向左走。我知道这是 jQuery ui 滑块库的问题，但我想知道是否有人使用 selectToUISlider 找到了解决此问题的好方法。

我根本不需要第一个手柄来移动，它是一个固定值（我只是在第一个手柄上做了一个 display:none）。

任何帮助将不胜感激！

-罗伯

Answer 1

按照 DarthJDG 的例子，我查看了源代码并以另一种方式修复了一个错误。因此，右侧滑块在向右移动时具有优先权，而左侧滑块向左移动时具有优先权。

---

jquery.ui.slider.js的这一部分

        var thisDistance = Math.abs( normValue - self.values(i) );

替换为：

        var thisDistance = Math.abs( normValue - (self.values(i) + i) );

然后删除

    if( o.range === true && this.values(1) === o.min ) {
        index += 1;
        closestHandle = $( this.handles[index] );
    }

或者在缩小版中，这部分：

var l=Math.abs(c-j.values(k));

替换为：

var l=Math.abs(c-(j.values(k)+k));

并删除：

if(b.range===true&&this.values(1)===b.min){g+=1;e=d(this.handles[g])}

变量名称在您的缩小 jquery 库版本中可能不同，但可以使用文件中的此搜索查询找到锚点：

.range===true&&this.

希望这会有所帮助。

Answer 2

我快速查看了源代码，您也许可以根据您的目的破解 jQuery UI 滑块代码。我下载了 jQuery UI 1.8.12，看看./development-bundle/ui/jquery.ui.slider.js 的第 281 行：

// 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] );
}

错误修复是一个很好的提示，更改应该去哪里，将您的条件更改为以下：

if( o.range === true && index == 0 ) {

这可以确保如果它是一个范围滑块，无论你做什么，你总是拖动第二个。您可以通过下载没有滑块组件的自定义 jQuery UI 缩小版本来使用您的代码，然后手动包含您破解的代码，或者您可以破解缩小的代码。

寻找：

if(a.range===true&&this.values(1)===a.min)

改为：

if(a.range===true&&g==0)

如果您不想丢失原始滑块（这样您就可以在页面的其他位置使用它），只需将这个被黑的扩展程序重命名为其他名称并单独包含它。

修复重叠错误并向滑块组件添加一个选项以修复其中一个手柄会很好，但我担心这超出了这个答案的范围。 :)