最近在做一个拖拽图片排序的项目,其中就有个检测两个对象之间是否发生碰撞,网上有好多写好的代码,但讲原理的没有找到几个,下面就剖析一下是如何实现碰撞的!
一、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;
}
}
碰撞原理叙述完了,如有不足之处欢迎大家指正!