具有多个手柄的 JQuery UI 滑块：如何阻止手柄交叉？

Question

我正在开发一个快速解决方案，它使用具有多个手柄的滑块来定义动态布局的宽度。

我尝试使用 ExtJS3 和最新的 JQuery UI。

在 ExtJS 中，您可以约束句柄，这样它们就不会相互交叉，这是一种实现我需要的 UI 的非常直观的方法，但是有一些原因我宁愿不将 ExtJS 用于海洋中的一个“岛屿” jQuery。

那么，有谁知道一个秘密属性，或者一些限制 JQuery 滑块中多个句柄的代码？

为了清楚起见：如果您有一个带有 2 个手柄的滑块，一个位于 40，一个位于 60；该约束将阻止您将 60 处的手柄拖动到 20 处，而无需先移动 40 处的手柄。

Answer 1

在滑动事件中，您可以通过检查滑块值并返回 true 以允许滑动或返回 false 以阻止滑动来限制手柄移动（有关更多信息，请参阅 jQuery UI 文档）

Answer 2

Jquery 滑块使用什么代码？查看范围滑块演示，它有两个手柄，并且不可能交叉它们。

Answer 3

正如 @madcapnmckay 指出的，如果您有一个带有两个手柄的滑块，并且选项中的 range: true ，则手柄不能相互拖动。

我遇到了一个问题，它没有正确约束，但事实证明我有一个字符串 'true' 而不是布尔值 true

Answer 4

我来晚了一点，但我想分享我最紧凑但可读的方法来做到这一点。从技术上讲，它与@tototresde 的答案非常相似。

slide: function (e, ui) {
  // Prevent crossing and overlapping of slider handles.
  if (ui.values[(ui.handleIndex - 1)] >= ui.value ||
      ui.values[(ui.handleIndex + 1)] <= ui.value) {
    return false;
  }
}

Answer 5

检查这个解决方案：

slide : function( event, ui ) {
        //Actual Handle Selected
        var handleIndex = $(ui.handle).index()-1;

        var diffA, diffB;

        //Check with right handles
        if(handleIndex > 0)
            diffA = ui.values[handleIndex] - ui.values[handleIndex-1];

        //Check with left handles
        if(handleIndex < ui.values.length-1)
            diffB = ui.values[handleIndex+1] - ui.values[handleIndex];

        if (diffA <= 0 || diffB <= 0) { /*checks for the values and compares*/
            return false;
        }
   }