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

【问题标题】：JQuery UI Slider with Multiple handles: How to stop the handles from crossing?具有多个手柄的 JQuery UI 滑块：如何阻止手柄交叉？
【发布时间】：2010-08-17 07:54:26
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： jquery-ui slider handle constraints

【解决方案1】：

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

【讨论】：

是的，这确实有效——猜猜我只是希望有一个秘密的“约束：真”参数或其他东西:) 实际上我真正需要的只是对“值”数组进行排序滑块，然后越过没关系。不过不用担心，你的答案是最准确的，所以你得到了打勾，谢谢！

【解决方案2】：

您为 Jquery 滑块使用什么代码？看着range slider demo，它有两个把手，不可能越过它们。

【讨论】：

我使用的是 JQuery UI Slider，但是我定义了多个句柄，最多可以在栏上设置 6 个。我可以尝试在每对之间设置一个范围而不是对其进行样式设置...

【解决方案3】：

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

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

【讨论】：

【解决方案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;
  }
}

【讨论】：

【解决方案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;
        }
   }

【讨论】：

你真的希望第一个句柄的索引为-1吗？
这太棒了...我想知道...现在它可以防止手柄向左交叉，但您仍然可以将手柄拖过手柄向右。需要什么来防止任何交叉？