js中判断2个div是否有交集

最新推荐文章于 2024-07-05 00:08:35 发布

BeautyMyth

最新推荐文章于 2024-07-05 00:08:35 发布

阅读量6.8k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/cjsyr_cjsyr/article/details/25738387

版权

Javascript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

在做东西时，需要判断当2个div没有交集的时候再处理一些东西，在这里记录下，大概的实现方式，可能也有其他更简单的方式。

如下图中的obj1与obj2，可以以obj1为固定对象来进行判断

//判断2个div是否有交集,判断时以obj1作为固定的obj2作为移动的
            function check(obj1, obj2) {
                //以obj1作为固定的参照物，使用时注意div是否有top与left，如果没有设置的话会是空值
                //obj2在obj1的上面 obj2.top+obj2.height<obj1.top 
                //obj2在obj1的下面 obj2.top>obj1.top+obj1.height 
                //obj2在obj1的左面 obj2.left+obj2.width<obj1.left 
                //obj2在obj1的右面 obj2.left>obj1.left+obj1.width
                var obj1top = parseInt($(obj1).css("top"));
                var obj1left = parseInt($(obj1).css("left"));
                var obj1width = parseInt($(obj1).width());
                var obj1height = parseInt($(obj1).height());
                var obj2top = parseInt($(obj2).css("top"));
                var obj2left = parseInt($(obj2).css("left"));
                var obj2width = parseInt($(obj2).width());
                var obj2height = parseInt($(obj2).height());
                if ((obj2top + obj2height < obj1top) || (obj2top > obj1top + obj1height) || (obj2left + obj2width < obj1left) || (obj2left > obj1left + obj1width)) {
                    return true;
                }
                else {
                    return false;
                }
            }