原生javascript实现DIV拖拽并计算重复面积(4)

var overlap = {
    hostel :{},                //所有需要计算重合的元素
    overlapList :{},           //已经重合的元素
    init : function(elems){
        each(elems,function(i,elem,oThis){
            elem.setAttribute('overlap',i);
            var ret = objPos(elem),l=ret.left,t=ret.top,b=ret.bottom,r=ret.right;
            oThis.hostel[i]={elem:elem,leftTopDot:{x:l,y:t},leftBottomDot:{x:l,y:b},rightTopDot:{x:r,y:t},rightBottomDot:{x:r,y:b}};
        },this);
    },
    setElem:function(elem){
        if(!elem)return;
        var ret = objPos(elem),l=ret.left,t=ret.top,b=ret.bottom,r=ret.right;
        this.hostel[elem.getAttribute('overlap')] ={elem:elem,leftTopDot:{x:l,y:t},leftBottomDot:{x:l,y:b},rightTopDot:{x:r,y:t},rightBottomDot:{x:r,y:b}};
    },
 //判断是否重合    
    isOverlap : function(my){
        var obj= {}, my = this.hostel[my.getAttribute('overlap')];
       
        each(this.hostel,function(key,config,oThis){
            // 是元素本身 则返回
            if(config.elem === my.elem)return ;
   
            //判断2个div是否重合 如果不重合 则返回
            if(my.leftBottomDot.y<=config.leftTopDot.y||my.leftTopDot.y>=config.leftBottomDot.y||my.rightTopDot.x<=config.leftTopDot.x||my.leftTopDot.x>=config.rightTopDot.x)
                return;
            obj[config.elem.getAttribute('overlap')] =[config.elem,oThis.howOverlap(my,config)];
        },this);
        return obj;
    },
 //判断重合面积
    howOverlap : function(my,other){
        var l=other.leftBottomDot.x,r=other.rightTopDot.x,t=other.leftTopDot.y,b=other.leftBottomDot.y,arr=[],
        lt = this.include(my.leftTopDot,l,r,t,b,'leftTopDot-rightBottomDot'),
        lb = this.include(my.leftBottomDot,l,r,t,b,'leftBottomDot-rightTopDot'),
        rt = this.include(my.rightTopDot,l,r,t,b,'rightTopDot-leftBottomDot'),
        rb = this.include(my.rightBottomDot,l,r,t,b,'rightBottomDot-leftTopDot');
        lt&&arr.push(lt)||lb&&arr.push(lb)||rt&&arr.push(rt)||rb&&arr.push(rb);
       
        if(!arr[0]) return 0;
  //一个点 或者是 2个点都在其中  计算方法是一样的
  if(arr.length===1||arr.length===2){
   var key = arr[0].split('-'),x1=my[key[0]].x,y1=my[key[0]].y,x2=other[key[1]].x,y2=other[key[1]].y;
   return Math.abs((x1-x2)*(y1-y2));  
  };   
  //完全重合
  if(arr.length===4){
   return 162*162; 
  };  
    },
 //看点是不是在另一个div中
    include : function(dot,l,r,t,b,key){
  return (dot.x>=l&&dot.x<=r&&dot.y>=t&&dot.y<=b)?key:false;
    }
};
window.onload = function(){
    extend(Drag.options,{callbackmove:move,callbackup:up});
 
    function up(elem){
        for(var n in overlap.overlapList)
            removeClass(overlap.overlapList[n][0],'focus')
        overlap.overlapList = {};
        Drag.elem.innerHTML =Drag.elem.id;
    };
 
    function move(elem){
        overlap.setElem(elem);
        //p为判断返回的obj是不是空的
        var obj = overlap.isOverlap(elem),name,p = function(o){
            for (name in o)
                return false;
            return true;
        }(obj);   
       
        //如果是个空对象 则返回 不进行下面的遍历
        if(p){
            up();
            return;
        };
       
        var str ='';       
        overlap.overlapList = obj;
        each(overlap.hostel,function(key,config){
            if(obj[key]){
                addClass(obj[key][0],'focus');
    str = str +'与'+obj[key][0].id+'重合的面积为:'+obj[key][1]+'</br>';
            }else{
                removeClass(config.elem,'focus');
            }
        });
        Drag.elem.innerHTML = str;
    };
    Drag.init($('demo1'),$('demo2'),$('demo3'),$('demo4'),$('demo5'),$('demo6'),$('demo7'),$('demo8'),$('demo9'));
    overlap.init([$('demo1'),$('demo2'),$('demo3'),$('demo4'),$('demo5'),$('demo6'),$('demo7'),$('demo8'),$('demo9')]);
};
</script>
</body>
</html>