如何检测任意两个 jQuery 可拖动 div 之间的元素冲突？

Question

我有许多基本相同的 div，它们分布在屏幕上。每一个都是 jQuery 可在 x 轴上拖动的。你可以把它想象成一个带有许多手柄的 ui-slider。 如何编写一个函数来检查我可能拖动的任何 div 是否与任何其他 div 或 div 重叠？

我想要一个全局状态来指示是否有任何重叠，以及一种确定只有重叠的 div 的 id 的方法。

这是我迄今为止创建的，但我不太了解比较宽度/高度/偏移等的算法。请，我需要帮助。

<div class="dragable">
<div class="dragable">
<div class="dragable">
<div class="dragable">

--

function collisionChecker(activeDiv, anyOtherDiv) {
    //do activeDiv and anyOtherDiv overlap? Yes - return true
}

$('.dragable').draggable({
   drag: function( event, ui ) { 
      $('.dragable').not(this).each(function(){
         $('#result').text( collisionChecker($(ui.helper), $(this)) );
      });
    }
});

Answer 1

为初学者提供更简单的 Javascript 和 JQuery。

function checkOverlap() {
    var overlap, is_overlapped = [];

    // Go through all of the elements with this class name
    $('.item').each(function(i, selectedElement) {

        // Go through all of the elements with this class name which is not the selected element
        $('.item').not(selectedElement).each(function(i, currentElement) {
            // console.log("1st condition: " + ($(selectedElement).offset().left >= $(this).offset().left));
            // console.log("2nd condition: " + ($(selectedElement).offset().left <= ($(this).offset().left + $(this).width())));
            // console.log("3rd condition: " + ($(selectedElement).offset().top >= $(this).offset().top));
            // console.log("4th condition: " + ($(selectedElement).offset().top <= ($(this).offset().top + $(this).height())));
            if (
                ($(selectedElement).offset().left >= $(this).offset().left) &&
                ($(selectedElement).offset().left <= ($(this).offset().left + $(this).width())) &&
                ($(selectedElement).offset().top >= $(this).offset().top) &&
                ($(selectedElement).offset().top <= ($(this).offset().top + $(this).height()))
            ) {
                // console.log("I'm over another element");
                overlap = true;
                return overlap;
            }
        });

        if (overlap) {
            is_overlapped.push($(this).attr("id"));
        }

        if (is_overlapped.length > 0) {
            overlap = true;
        } else {
            overlap = false;
        }

    });

    return overlap;
}

基于@Beno 的回答。

Answer 2

function collisionChecker(activeDiv, anyOtherDiv) {
var otherY = anyOtherDiv.context.offsetTop;// other div x position
var otherX = anyOtherDiv.context.offsetLeft;// other div y position
var otherWidth = anyOtherDiv.context.offsetWidth;// other div width
var otherHeight = anyOtherDiv.context.offsetHeight;// other div height

var activeY = activeDiv.context.offsetTop;// active div x
var activeX = activeDiv.context.offsetLeft;// active div y
var activeWidth = activeDiv.context.offsetWidth;// active div width
var activeHeight = activeDiv.context.offsetHeight;// active div height

// limit definition
var otherLimitX = otherX + otherWidth;
if (activeX === otherLimitX ) {
  alert("collision");
}

}

Answer 3

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
}