如何检测 jQuery `` 元素之间的冲突？

jQuery Div 元素之间的碰撞检测

检测元素之间的碰撞是许多 Web 应用程序中的一项基本任务。在这种情况下，目标是确定是否有两个特定的

。以彩色框表示的元素在相互垂直移动时发生碰撞。

解决此问题的一种有效方法是利用下面提供的 overlaps 函数：

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

此函数需要两个

元素作为参数并返回一个布尔值，指示它们是否根据其位置和尺寸重叠。该函数首先检索每个元素的位置和大小，然后比较它们沿 x 轴和 y 轴的范围。如果任一方向有重叠，则返回 true。

为了演示此函数的用法，您可以创建一组

HTML 文档中的元素，将它们设置为框样式，并为它们分配唯一的 ID 以便识别。然后，在 jQuery 脚本中，您可以调用 overlaps 函数来检查这些框之间的冲突。以下代码提供了一个示例：

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

在此示例中，创建了一个名为“Red box”的红色框，并使用鼠标进行移动。标记为“Box 1”到“Box 4”的其他几个框位于“区域”div 中的不同位置。 jQuery 脚本检查“红框”与其他每个框之间的碰撞，并以一系列

形式显示结果。

利用overlaps函数，可以有效地实现jQuery

元素的碰撞检测。元素，在您的 Web 应用程序中实现动态交互和实时碰撞处理。

以上是如何检测 jQuery `` 元素之间的冲突？的详细内容。更多信息请关注PHP中文网其他相关文章！