判断可拖动div是否重合重合多少

时间:2020-05-12 人气:0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>Table</title> 
</head> 
<style type="text/css"> 
body{margin:0px; padding:0px; font-size:12px} 
.div{height:160px;width:160px;position:absolute; text-align:center; } 
.demo1{ border:1px solid #96C2F1;background-color:#EFF7FF;left:150px;top:20px} 
.demo2{ border:1px solid #9BDF70;background-color:#F0FBEB;left:450px;top:20px} 
.demo3{ border:1px solid #BBE1F1;background-color:#EEFAFF;left:750px;top:20px} 
.demo4{ border:1px solid #96C2F1;background-color:#EEFAFF;left:150px;top:220px} 
.demo5{ border:1px solid #FFCC00;background-color:#FFFFF7;left:450px;top:220px} 
.demo6{ border:1px solid #E3E197;background-color:#FFFFDD;left:750px;top:220px} 
.demo7{ border:1px solid #ADCD3C;background-color:#F2FDDB;left:150px;top:420px} 
.demo8{ border:1px solid #F8B3D0;background-color:#FFF5FA;left:450px;top:420px} 
.demo9{ border:1px solid #D3D3D3;background-color:#F7F7F7;left:750px;top:420px} 
.focus{background-color: #990000;} 
</style> 
<body > 
<div>demo1</div> 
<div>demo2</div> 
<div>demo3</div> 
<div>demo4</div> 
<div>demo5</div> 
<div>demo6</div> 
<div>demo7</div> 
<div>demo8</div> 
<div>demo9</div> 
<script language="javascript"> 
(function(window,undefined){ 
window.Sys = function (ua){ 
var b = { 
ie: /msie/.test(ua) && !/opera/.test(ua), 
opera: /opera/.test(ua), 
safari: /webkit/.test(ua) && !/chrome/.test(ua), 
firefox: /firefox/.test(ua), 
chrome: /chrome/.test(ua) 
},vMark = ""; 
for (var i in b) { 
if (b[i]) { vMark = "safari" == i ? "version" : i; break; } 
} 
b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0"; 
b.ie6 = b.ie && parseInt(b.version, 10) == 6; 
b.ie7 = b.ie && parseInt(b.version, 10) == 7; 
b.ie8 = b.ie && parseInt(b.version, 10) == 8; 
return b; 
}(window.navigator.userAgent.toLowerCase());

window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);

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; 
};

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容

判断可拖动div是否重合 重合多少

判断可拖动div是否重合重合多少