JS剖析正方形物體碰撞原理

最近在做一個拖拽圖片排序的項目，其中就有個檢測兩個對象之間是否發生碰撞，網上有好多寫好的代碼，但講原理的沒有找到幾個，下面就剖析一下是如何實現碰撞的！

一、4個結論
①拖拽層在目標層上部活動時不會碰撞
②拖拽層在目標層左邊活動時不會碰撞
③拖拽層在目標層右邊活動時不會碰撞
④拖拽層在目標層下邊活動時不會碰撞

二、先來理解層的4個邊界

三、結論①拖拽層在目標層上部活動時不會碰撞

假設div1是拖拽層，div2是目標層。
注：div1的下邊界始終在div2上邊界上面活動，則不會發生碰撞。

四、結論②拖拽層在目標層左邊活動時不會碰撞

注：div1的右邊界始終在div2左邊界左面活動，則不會發生碰撞。

五、結論③拖拽層在目標層右邊活動時不會碰撞

注：div1的左邊界始終在div2右邊界右面活動，則不會發生碰撞。

六、結論④拖拽層在目標層下邊活動時不會碰撞

注：div1的上邊界始終在div2下邊界下面活動，則不會發生碰撞。

七、只需要判斷四個邊界，上面4種是不會發生碰撞的情況，排除這四種就說明發生碰撞了。

八、原理講完了，直接上代碼。

function(obj1, obj2) {
    var t1 = obj1.offsetTop;
    var r1 = obj1.offsetWidth+obj1.offsetLeft;
    var b1 = obj1.offsetHeight+obj1.offsetTop;
    var l1 = obj1.offsetLeft;

    var t2 = obj2.offsetTop;
    var r2 = obj2.offsetWidth+obj2.offsetLeft;
    var b2 = obj2.offsetHeight+obj2.offsetTop;
    var l2 = obj2.offsetLeft;

    if(t1>b2||r1<l2||b1<t2||l1>r2){
        return false;
    }else{
        return true;
    }
}

碰撞原理敘述完了，如有不足之處歡迎大家指正！