How to detect element collision between any two jQuery draggable divs out of many?

Question

I have many div's that are basically identical and are spread across the screen. Each one is jQuery draggable on the x-axis. You could imagine it as a ui-slider with many handles. How can I write a function that will check whether when anyone of the div's which I may be dragging has overlapped any other div or div's?

I would like a to have a global status indicating if any are over lapping and also a way to determine the id's of only the div's which overlap.

This is what I have created so far but I don't quite understand the algorhytm of comparing widths/heights/offsets etc. Please, I need help.

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

this could help you http://stackoverflow.com/questions/11452185/restrict-jquery-draggable-items-from-overlapping-colliding-with-sibling-elements — Chris, Sep 30 '15 at 11:47

score 1 · Answer 1 · answered Aug 08 '19 at 09:29

In much more plain Javascript and JQuery for beginners.

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

Based on @Beno 's answer.

score 0 · Answer 2 · answered Oct 16 '15 at 21:45

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

}

score 0 · Accepted Answer · answered Dec 17 '15 at 11:31

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
}

How to detect element collision between any two jQuery draggable divs out of many?

3 Answers3