如何使用 JavaScript 和 jQuery 检测两个 Div 之间的冲突？

如何检测两个 DIV 之间的冲突

在网页上使用动态元素时，必须能够检测两个 DIV 之间的冲突他们。在本例中，我们正在处理两个相互垂直移动的简单彩色 div。

解决方案：

要确定 div 是否发生碰撞，我们将利用 JavaScript 和 jQuery 库。下面是解决方案的细分：

1. 获取位置：我们首先使用 getPositions() 函数计算两个 div 的位置，该函数返回一个表示每个 div 的左侧和顶部坐标。
2. 比较位置：使用comparePositions() 函数，我们比较每个 div 的位置。如果一个 div 的左边缘小于另一个 div 的左边缘，并且第一个 div 的右边缘大于第二个 div 的左边缘，则会发生冲突。同样，我们检查垂直方向上的碰撞。
3. 检查重叠：overlaps() 函数以两个 div 作为输入，组合前面的函数来确定它们是否重叠。如果是，该函数返回 true；
4. 在 JavaScript 中实现：我们将 Overlaps() 函数合并到一个 jQuery 函数中，该函数测试红色 div (box0) 是否与任何其他 div 发生碰撞 (框 1-4）。然后将结果附加到页面正文。

示例代码：

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

此解决方案对于检测垂直方向之间的碰撞非常高效且准确移动div。它为各种交互式 Web 应用程序（例如游戏和模拟）提供了有用的工具。

以上是如何使用 JavaScript 和 jQuery 检测两个 Div 之间的冲突？的详细内容。更多信息请关注PHP中文网其他相关文章！