如何使用多个检测相互冲突的句柄实现Jquery滑块？(How to implement a Jquery slider with multiple handles that detect collis

如何使用多个检测相互冲突的句柄实现Jquery滑块？(How to implement a Jquery slider with multiple handles that detect collision with each other?)

我有一个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）如果拖动手柄的中心点与另一个手柄的中心点重叠或交叉，请执行以下操作：

我不确定这是否会对我原来问题的答案产生巨大影响..？

I have a jquery slider that contains a handle for each item in a given array.

I want each slider to detect when it has collided with any other handle. When I say collided I mean overlapped because I do want them to actually overlap.

I have created this but I am sure there is a simpler way to write this comparison 'if' statement. Can someone please suggest an alternative?

*Please read the note at the bottom before answering this question.

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

Note: In the end the handles will have varied widths then I will need two types of collision detection.

1) If dragging handle becomes overlapped partially with any other handle, Do.. 2) If dragging handle's centre point overlaps or crosses another handle's centre point, Do..

I'm not sure if this will hugely effect the answer to my original problem..?

最满意答案

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 } 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 }