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

Question

我有一个带四个手柄的滑块。当您拖动它们时，禁止它们相互交叉的最简单方法是什么？我尝试比较它们的 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();
    }
});

Answer 1

您可以使用选择器$('a', event.target).index(ui.handle) 访问句柄的index。

从那里，您可以访问下一个/上一个句柄值并比较当前句柄的值是否在它们之间。如果是，则返回 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();
}