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

Question

我有这个 fiddle 的带有四个手柄的滑块。拖动它们时禁止它们相互交叉的最简单方法是什么？我尝试比较它们的 position.left 值并在它们等于相邻句柄时返回 false，但这完全消除了拖动。理想情况下，您无法将其拖动到小于每个手柄之间 select 下拉菜单的宽度，但如果我能阻止它们交叉，我可能可以到达那里。

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

Answer 1

您可以使用选择器 $('a', event.target).index(ui.handle).

访问句柄的 index

从那里，您可以访问 next/previous 句柄值并比较当前句柄的值是否介于它们之间。如果是，则 return false 并防止句柄重叠。

在下面的示例中，值 25 是用于防止句柄重叠的硬编码填充。

Updated Example

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

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

jQuery UI slider - prevent multiple handles from overlapping

javascript

jquery

jquery-ui

slider

position