JavaScript と jQuery を使用して 2 つの Div 間の衝突を検出するにはどうすればよいですか?

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