软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：可拖动div

<!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 id=demo1 class=div demo1>demo1</div> 
<div id=demo2 class=div demo2>demo2</div> 
<div id=demo3 class=div demo3>demo3</div> 
<div id=demo4 class=div demo4>demo4</div> 
<div id=demo5 class=div demo5>demo5</div> 
<div id=demo6 class=div demo6>demo6</div> 
<div id=demo7 class=div demo7>demo7</div> 
<div id=demo8 class=div demo8>demo8</div> 
<div id=demo9 class=div demo9>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; 
};

技术文章快速查找

ExtJS中文乱码之GBK格式编码解决方案及代码

yepnope.js 异步加载资源文件

Jqyery中同等与js中windows.onload的应用

jQuery 获取和设置select下拉框的值实现代码

javascript实现数字验证码的简单实例

JQuery的html(data)方法与<script>脚本块的解决方法

JS调用页面表格导出excel示例代码

JavaScript避免代码的重复执行经验技巧分享

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建

软件开发培训班 >> 编程开发 >> JavaScript

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

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