具有多个句柄的JQuery UI滑块：如何阻止句柄过关？

Question

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

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

在ExtJS中，您可以限制手柄，使其不交叉彼此，这对我所需的用户界面来说是一种非常直观的方法，但是我有理由不使用ExtJS作为“岛屿”在JQuery的海洋中。

那么，有没有人知道一个秘密属性，或一些代码约束JQuery滑块中的多个句柄？

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

Answer 1

在幻灯片事件中，你可以通过检查滑块值，并返回true，让幻灯片或假，以防止它（更多信息jQuery UI的文档）限制手柄运动

Answer 2

你用什么代码为Jquery滑块？看着range slider demo，它有两个手柄，它不可能穿过它们。

Answer 3

由于@madcapnmckay指出，如果您的滑块有两个手柄，并且选项中的手柄不能相互拖动。

我在那里没有适当限制问题，但事实证明，我有一个字符串'true'，而不是一个布尔true

Answer 4

检查的此解决方案：

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

Answer 5

我有点在这里聚会晚了，但我想分享我最紧凑，但可读的方式来做到这一点。从技术上讲，它与@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; 
    } 
}