Question

我正在尝试创建一个简单的拖放项目库存游戏，正如您从JSBin示例中看到的，我有4个彩色框，如果您单击，将出现在库存页脚槽中。单击库存页脚槽中的项目后，我可以将它们拖动到插槽区域。

我现在面临的问题是某些物品可以相互组合。我怎么知道我合并的id项？我需要检测两个div之间的碰撞？请指教，谢谢。

function collision($div1, $div2) {
        var x1 = $div1.offset().left;
        var y1 = $div1.offset().top;
        var h1 = $div1.outerHeight(true);
        var w1 = $div1.outerWidth(true);
        var b1 = y1 + h1;
        var r1 = x1 + w1;
        var x2 = $div2.offset().left;
        var y2 = $div2.offset().top;
        var h2 = $div2.outerHeight(true);
        var w2 = $div2.outerWidth(true);
        var b2 = y2 + h2;
        var r2 = x2 + w2;

        if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
        return true;
    }

Here's the JSBin

*编辑：我设法使用上述功能检测2个div的碰撞。感谢..

尝试将红色拖到黄色框中，反之亦然......

Here's the updated JSBin

检测碰撞或重叠项目

0 个答案: