如何实现一个 Jquery 带有多个检测相互碰撞的手柄的滑块？

Question

我有一个 jquery 滑块，其中包含给定数组中每个项目的句柄。

我希望每个滑块都能检测到它何时与任何其他手柄发生碰撞。当我说碰撞时，我的意思是重叠，因为我确实希望它们真正重叠。

我创建了这个，但我确信有一种更简单的方法来编写这个比较 'if' 语句。有人可以建议替代方案吗？

*请在回答此问题前阅读底部的注释。

var handle_data = {point:'2',point:'4',point:'6',point:'8'}; // will contain other data later
var handle_points = []; 
$.each(handle_data, function(i, val){               
    handle_points.push(val["point"]);
});

$("#slider").slider({
    values: slider_points,
    slide: function(evt, ui) {
        if (
        ui.values[0] == ui.values[1]||
        ui.values[0] == ui.values[2]||
        ui.values[0] == ui.values[3]||
        ui.values[0] == ui.values[4]||
        ui.values[1] == ui.values[2]||
        ui.values[1] == ui.values[3]||
        ui.values[1] == ui.values[4]||
        ui.values[2] == ui.values[4]||
        ui.values[2] == ui.values[3]||
        ui.values[3] == ui.values[4])
        console.log('collsion');
    }
});

注：最后，手柄将具有不同的宽度，然后我将需要两种类型的碰撞检测。

1) 如果拖动手柄与任何其他手柄部分重叠，请执行.. 2) 如果拖动手柄的中心点与另一个手柄的中心点重叠或交叉，Do..

我不确定这是否会极大地影响我原来问题的答案......？

Answer 1

function check_overlap() {
ARE_overlaped=[], NOT_overlaped=[];
$('.ui-slider-handle').each(function(i, obj0) {

    $('.ui-slider-handle').not(obj0).each(function(i, obj1) {
        left = $(this).offset().left;
        overlap = !($(obj0).offset().left + $(obj0).width() < $(this).offset().left || $(obj0).offset().left > $(this).offset().left + $(this).width());
        (overlap) ? overlap = true : overlap = false;
        return !overlap;
    });

    (overlap) ? ARE_overlaped.push($(this).attr("id")):NOT_overlaped.push($(this).attr("id"));  

    if(ARE_overlaped.length > 0) overlap = true;
    if(NOT_overlaped.length ==0) overlap = false;
    $(ARE_overlaped).each(function(){ 
        $('#'+this).addClass('overlap');
        $('#'+this).find('.info').html('<div class="warning red"></div>');
    });
    $(NOT_overlaped).each(function(){ 
        $('#'+this).removeClass('overlap');
        $('#'+this).find('.info .red').removeClass('warning red');
        if($('#'+this).position().left==$('#'+this).attr("origleft")) $('#'+this).find('.info').html('');
    });
});
$('#result').text('Overlap: ' + overlap); // FOR TESTING display overlap status
}

如何实现一个 Jquery 带有多个检测相互碰撞的手柄的滑块？

How to implement a Jquery slider with multiple handles that detect collision with each other?

collision

detection

uislider