Überprüfen Sie Overlay für viele divs Problem

Question

Ich möchte überprüfen, ob einige Divs überlagern. Hier sind die Funktionen ich verwende

function collision($div1, $div2) { 
    var x1 = $div1.offset().left; 
    var y1 = $div1.offset().top; 
    var h1 = $div1.outerHeight(true); 
    var w1 = $div1.outerWidth(true); 
    var b1 = y1 + h1; 
    var r1 = x1 + w1; 
    var x2 = $div2.offset().left; 
    var y2 = $div2.offset().top; 
    var h2 = $div2.outerHeight(true); 
    var w2 = $div2.outerWidth(true); 
    var b2 = y2 + h2; 
    var r2 = x2 + w2; 

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) 
    return false; 

    return true; 
} 

$("#flex[data-item-id]").each(function() {  
    var id_item = $(this).data('item-id'); 
    var status = collision($('#c + id_item), $("#r" + id_item)); 

    if (status) { 
    $('.here').css('background-color', 'red'); 
    } 
}); 

Ich weiß nicht, warum, aber in der Konsole setzte ok wahr und falsch ... genau, wo es braucht, aber die if(status) nicht so gut funktionieren ..

Answer 1

Wie @Rory McCrossan gerade gesagt, Sie vermissen ein 'in Ihrem Selektor.

Versuchen Sie diesen Code:

function collision($div1, $div2) { 
    var x1 = $div1.offset().left; 
    var y1 = $div1.offset().top; 
    var h1 = $div1.outerHeight(true); 
    var w1 = $div1.outerWidth(true); 
    var b1 = y1 + h1; 
    var r1 = x1 + w1; 
    var x2 = $div2.offset().left; 
    var y2 = $div2.offset().top; 
    var h2 = $div2.outerHeight(true); 
    var w2 = $div2.outerWidth(true); 
    var b2 = y2 + h2; 
    var r2 = x2 + w2; 

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) 
    return false; 

    return true; 
} 

$.each("#flex[data-item-id]" , function() {  
    var id_item = $(this).data('item-id'); 
    var status = collision($('#c' + id_item), $("#r" + id_item)); 

    if (status) { 
    $('.here').css('background-color', 'red'); 
    } 
}); 

EDIT: ich die jQuery jede Funktion auf die jQuery each documentation eingestellt. Ich kann nicht testen, ob es funktioniert, bis Sie Ihren HTML-Code hinzufügen.

Answer 2

Eine funktionierende Revision Ihrer Kollisionsfunktion, die zusätzlich zu den horizontalen Überlappungen eine vertikale Überlappung der Ober- und Unterseite prüft, um eine tatsächliche Überlappung zu bestätigen.

function collision($div1, $div2) { 
 
    var x1 = $div1.offset().left, 
 
    y1 = $div1.offset().top, 
 
    b1 = $div1.outerHeight(true) + y1, 
 
    r1 = $div1.outerWidth(true) + x1; 
 

 
    var x2 = $div2.offset().left, 
 
    y2 = $div2.offset().top, 
 
    b2 = $div2.outerHeight(true) + y2, 
 
    r2 = $div2.outerWidth(true) + x2; 
 

 
    var v = false, 
 
    h = false, 
 
    collide = false; 
 

 
    if (b1 > y2 && b1 < b2) { 
 
    v = true; 
 
    } 
 
    if (b2 > y1 && b2 < b1) { 
 
    v = true; 
 
    } 
 
    // vertical overlap check 
 

 
    if (r1 > x2 && r1 < r2) { 
 
    h = true; 
 
    } 
 
    if (r2 > x1 && r2 < r1) { 
 
    h = true; 
 
    } 
 
    // horizontal overlap check 
 

 
    if (h && v) { 
 
    collide = true; 
 
    } 
 

 
    return collide 
 
} 
 
/* 
 
$.each("#flex[data-item-id]" , function() {  
 
    var id_item = $(this).data('item-id'); 
 
    var status = collision($('#c' + id_item), $("#r" + id_item)); 
 

 
    if (status) { 
 
    $('.here').css('background-color', 'red'); 
 
    } 
 
}); */ 
 

 
$("#monitor").text(collision($('#alpha'), $('#beta'))); 
 
// display the result

#alpha { 
 
    position: absolute; 
 
    left: 3em; 
 
    top: 2em; 
 
    width: 4em; 
 
    height: 4em; 
 
    background: #489; 
 
} 
 

 
#beta { 
 
    position: absolute; 
 
    left: 4em; 
 
    top: 4em; 
 
    width: 4em; 
 
    height: 4em; 
 
    background: #498; 
 
} 
 

 
#monitor { 
 
    position: fixed; 
 
    bottom: 1em; 
 
    left: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="alpha"></div> 
 
<div id="beta"></div> 
 

 
<div id="monitor"></div>