判断两个页面元素是否重叠的算法

项目背景：

界面展示为一组零散的图片围绕一张手机屏幕图片。

客户提出需求为，需要拖动每个零散的图片到手机屏幕图片中并能自动打开相应的页面。

 

基于上面的项目需求则需要解决一个问题，即如何判断指定的两张图片是否有重叠。

核心代码如下：

                //hotarea为手机屏幕图片的id,即目标元素id

               //this为当前拖动的图片元素

                var offset_target = $("#hotarea").position();
                var target_width = $("#hotarea").width();
                var target_height = $("#hotarea").height();

                var offset_c = $(this).position();
                var c_width = $(this).width();
                var c_height = $(this).height();

               //判断x坐标是否有重合，需考虑元素宽度
                var xmerge = judgemerge(offset_target.left, offset_target.left + target_width, offset_c.left, offset_c.left + c_width);
                //判断y坐标是否有重合，需考虑元素高度

                var ymerge = judgemerge(offset_target.top, offset_target.top + target_height, offset_c.top, offset_c.top + c_height);

                if (xmerge && ymerge) {

                //如果x，y坐标都有重合则说明两个元素有重合。

　　　　　 }

--------------------------------------------------------------------------------------------------------

       //判断重叠算法，需传入目标元素的x/y坐标范围及当前元素x/y坐标范围
        function judgemerge(target_min, target_max, c_min, c_max) {
            if (c_min > target_min && c_min < target_max) {//最小值是否在目标元素坐标范围内
                return true;
            } else if (c_max > target_min && c_max < target_max) {//最大值是否在目标元素坐标范围内
                return true;
            } else if (c_min < target_min && c_min < target_max && c_max > target_min && c_max > target_max) {

               //当前元素坐标范围是否包含目标元素坐标范围
                return true;
            } else {
                return false;
            }
        }

 

 

 

 

 

 

              

转载于:https://www.cnblogs.com/zxh0208/p/3600044.html