jQuery UI滑块-防止多个句柄重叠

jQuery UI slider - prevent multiple handles from overlapping

本文关键字：句柄 重叠 UI 滑块 jQuery      更新时间：2023-09-26

我有一个带四个手柄的滑块。当你拖动它们时，禁止它们交叉的最简单方法是什么？我试着比较它们的position.left值，当它们等于相邻的句柄时返回false，但这完全扼杀了拖动。理想情况下，你不能在每个手柄之间拖动小于选择下拉列表宽度的东西，但如果我能阻止它们交叉，我可能会到达那里。

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();
}
相关文章：