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

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

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

1 个答案: