我有一个带有四个 handle 的 slider 。拖动它们时禁止它们相互交叉的最简单方法是什么?我尝试比较它们的 position.left 值,并在它们等于相邻 handle 时返回 false,但这完全消除了拖动。理想情况下,您不能将其拖动到小于每个 handle 之间选择下拉菜单的宽度,但如果我能阻止它们交叉,我可能可以到达那里。
http://jsfiddle.net/0jqs0eeh/7/
$(".pct-slider").slider({
min: 0,
max: 1440,
step: 15,
range: false,
values: [180, 435, 1080, 1320],
create: function (event, ui) {
$.each( initialValues, function(i, v){
updateValue({
value: v,
handle: $('.ui-slider-handle').eq(i)
});
});
},
slide: function (event, ui) {
var handleIndex = $(ui.handle).index();
updateValue(ui);
positionSelects();
}
});
最佳答案
您可以使用选择器 $('a', event.target).index(ui.handle)
访问句柄的 index
。
从那里,您可以访问下一个/上一个句柄值并比较当前句柄的值是否介于它们之间。如果是,则返回 false 并防止句柄重叠。
在下面的示例中,值 25 是硬编码填充,用于防止句柄重叠。
slide: function (event, ui) {
var handleIndex = $('a', event.target).index(ui.handle),
curr = ui.values[handleIndex],
next = ui.values[handleIndex + 1] - 25,
prev = ui.values[handleIndex - 1] + 25;
if (curr > next || curr < prev) {
return false;
}
updateValue(ui);
positionSelects();
}
关于javascript - jQuery UI slider - 防止多个 handle 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29111034/