jQuery / JavaScript冲突检测

Question

如何检测两个<div>元素是否发生冲突？

这两个div是简单的彩色框，彼此垂直，因此没有复杂的形状或角度。

Answer 1

var overlaps = (function () {

    function getPositions( elem ) {

        var pos, width, height;

        pos = $( elem ).position();

        width = $( elem ).width();

        height = $( elem ).height();

        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];

    }



    function comparePositions( p1, p2 ) {

        var r1, r2;

        r1 = p1[0] < p2[0] ? p1 : p2;

        r2 = p1[0] < p2[0] ? p2 : p1;

        return r1[1] > r2[0] || r1[0] === r2[0];

    }



    return function ( a, b ) {

        var pos1 = getPositions( a ),

            pos2 = getPositions( b );

        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );

    };

})();



$(function () {

    var area = $( '#area' )[0],

        box = $( '#box0' )[0],

        html;



    html = $( area ).children().not( box ).map( function ( i ) {

        return '<p>Red box + Box ' + ( i + 1 ) + ' = ' + overlaps( box, this ) + '</p>';

    }).get().join( '' );



    $( 'body' ).append( html );

});


body {

    padding: 30px;

    color: #444;

    font-family: Arial, sans-serif;

}



h1 {

    font-size: 24px;

    margin-bottom: 20px;

}



#area {

    border: 2px solid gray;

    width: 500px;

    height: 400px;

    position: relative;

}



#area > div {

    background-color: rgba(122, 122, 122, 0.3);

    position: absolute;

    text-align: center;

    font-size: 50px;

    width: 60px;

    height: 60px;

}



#box0 {

    background-color: rgba(255, 0, 0, 0.5) !important;

    top: 150px;

    left: 150px;

}



#box1 {

    top: 260px;

    left: 50px;

}



#box2 {

    top: 110px;

    left: 160px;

}



#box3 {

    top: 200px;

    left: 200px;

}



#box4 {

    top: 50px;

    left: 400px;

}



p {

    margin: 5px 0;

}


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

<h1>Detect overlapping with JavaScript</h1>

<div id="area">

    <div id="box0"></div>

    <div id="box1">1</div>

    <div id="box2">2</div>

    <div id="box3">3</div>

    <div id="box4">4</div>

</div>

一般思路-获得框的偏移量和尺寸，并检查它们是否重叠。

如果要更新，可以使用setInterval：

function detectOverlapping() {
    // code that detects if the box overlaps with a moving box
    setInterval(detectOverlapping, 25);
}

detectOverlapping();

另外，请注意，您可以针对特定示例优化功能。

• 因为它们是固定的，所以您不必重复读取框的尺寸（就像我在代码中一样）。您可以在页面加载时读取它们（将其读取到变量中），然后仅读取变量

• 小盒子的水平位置不会改变（除非用户调整窗口大小）。轿厢的垂直位置不变。因此，这些值也不必重复读取，也可以存储到变量中。

• 您无需测试小盒子是否始终与所有汽车盒子重叠。您可以-基于其垂直位置-确定当前箱子在哪个车道上，并仅从该车道测试特定的汽车箱子。