检查某些div之间的冲突？ [英] check collision between certain divs?

问题描述

任何人都知道如何检查某些div之间的冲突？目前我正在使用 getBoundingClientRect（），但它会检查每个div：

Anyone know how to check for collision between certain divs? At the moment I'm using getBoundingClientRect(), but it checks for every div:

if (this.getBoundingClientRect()) {
    animateContinue = 1;
}

我如何检查具体的？使用这个for循环我可以得到我要检查的div的ID。

How would I go about checking specific ones? Using this for loop I can get the IDs of the divs I want to check.

for (var x = 1; x <= noOfBoxArt; x++) {
    console.log('#boxArt'+x);
}

推荐答案

好的。使用修改后的此副本结束。完成这项工作的功能是：

Okay. Ended up using a modified version of this duplicate. The function which does the work is:

var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width() / 2;
        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] );
    };
})();

并使用重叠调用（div1，div2）; （返回true或false）。

and is called by using overlaps( div1, div2 ); (returns true or false).

这篇关于检查某些div之间的冲突？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！