//碰撞检测 isCrash(targetDom, moveDom) { /* targetDom:目标对象(即将要被碰撞的元素) moveDom:移动的对象(可能是拖拽移动,也可能是其他原因导致其移动) */ if (targetDom === moveDom) return false;//如果目标对象和移动对象是同一个,返回未接触 let tr = targetDom.getBoundingClientRect(), mr = moveDom.getBoundingClientRect(); let t = { x1: tr.x, x2: tr.x + tr.width, y1: tr.y, y2: tr.y + tr.height };//目标对象的四角顶点坐标 let m = { x1: mr.x, x2: mr.x + mr.width, y1: mr.y, y2: mr.y + mr.height };//移动对象的四角顶点坐标 let a = { w: Math.min(t.x2, m.x2) - Math.max(t.x1, m.x1), h: Math.min(t.y2, m.y2) - Math.max(t.y1, m.y1) };//计算相交部分的宽度和高度 let area = (a.w > 0 ? a.w : 0) * (a.h > 0 ? a.h : 0);//计算相交部分的面积 return area ? true : false;//面积>0,即碰撞(这里可以根据业务需求,改成相交部分面积>具体的值才作为碰撞判断) },
原理:计算两个物体相交面积是否>0