复制代码代码如下：
<！Doctype HTML公共“ - // W3C // DTD XHTML 1.0 Transitional // en”“” http://www.org/tr/tr/xhtml1/dtd/xhtml1-xhtml1-transitional.transitional.dtdd'>
<html xmlns =“ http://www.w3.org/1999/xhtml”>
<头>
<meta http-equiv =“ content-type” content =“ text /html; charset = gb2312” />
<title>表</title>
</head>
<style type =“ text/css”>
身体{边距：0px;填充：0px;字体大小：12px}
.div {高度：160px; width：160px;位置：绝对；文字平衡：中心； }
.demo1 {border：1px实心＃96c2f1; backendbort-color：＃eff7ff; left：150px; top：20px}
.demo2 {border：1px实心＃9BDF70; background-color：＃f0fbeb; left：450px; top：20px}
.demo3 {border：1px实心＃bbe1f1;背景色：#eefaff; left：750px; top：20px}
.demo4 {border：1px实心＃96c2f1; background-color：#eefaff; left：150px; top：220px}
.demo5 {border：1px实心＃ffcc00; backendbourd-color：＃fffff7; left：450px; top：220px}
.demo6 {border：1px实心＃e3e197; background-color：#ffffdd; left：750px; top：220px}
.demo7 {border：1px固体＃adcd3c; backendbound-color：＃f2fddb; left：150px; top：420px}
.demo8 {border：1px实心＃f8b3d0; backendbourd-color：＃fff5fa; left：450px; top：420px}
.demo9 {border：1px实心＃D3D3D3; backendbourd-color：＃f7f7f7; left：750px; top：420px}
。
</style>
<身体>
<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>
<脚本语言=“ javascript”>
（函数（窗口，未定义）{
window.sys = function（ua）{
var b = {
ie：/msie/.test(UA）&&！/pera/.test（ua），
opera： /opera/.test(UA），
Safari：/webkit/.test(UA）&&！/chrome/.test（ua），
firefox： /firefox/.test(UA），
chrome： /chrome/.test(UA）
}，vmark =“”;
for（b）中的var i {
如果（b [i]）{vmark =“ safari” == i？ “版本”：i;休息; }
}
b.version = vmark && regexp（“（？：：“ + vmark +”）[///：]（[// d。] +）”）。测试（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;
返回b;
}（window.navigator.useragent.tolowercase（））;
window.sys.ie6 && document.execcommand（“ backgroundImageCache”，false，true）;
窗口。$ = function（id）{
返回document.getElementById（id）;
};
window.addlistener = function（element，e，fn）{
！element.events &&（element.events = {}）;
element.events [e] &&（element.events [e] [addListener.guid ++] = fn）||（element.events [e] = {'0'：fn}）;
element.AddeventListener？element.AddeventListener（e，fn，false）：element.Attachevent（“ on”“ on” + e，fn）;
};
window.addlistener.guid = 1;
window.removelistener = function（element，e，fn）{
var handlers = element.events [e]，type;
如果（fn）{
对于（输入处理程序）
if（操作者[type] === fn）{
element.removeEventListener？element.removeEventListener（e，fn，false）：element.detachevent（“ on” + e，fn）;
删除处理程序[type];
}
}别的{
对于（输入处理程序）{
element.RemoveEventListener？element.RemoveEventListener（e，handlers [type]，false）：element.detachevent（“ on” + e，handlers [type]）;
删除处理程序[type];
}
}
};
window.setstyle =函数（e，o）{
if（typeof o ==“字符串”）
e.style.csstext = o;
别的
对于（o中的var i）
e.Style [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = function（object，fun）{
var args = slice.call（gragments）.slice（2）;
返回函数（）{
返回fun.apply（对象，args）;
};
};
window.bindaseventlistener = function（object，fun，args）{
var args = slice.call（gragments）.slice（2）;
返回功能（事件）{
返回fun.apply（对象，[event || window.event] .concat（args））;
}
};
//复制JQ
window.extend = function（）{
var target =参数[0] || {}，i = 1，长度= grenguments.length，deep = true，options;
if（type target ===“ boolean”）{
deep =目标;
target =参数[1] || {};
i = 2;
}
if（typeof target！==“ object” && object.prototype.tostring.call（target）！=“ [对象函数]”）
target = {};
for（; i <长度; i ++）{
if（（（options = gragments [i]）！= null）
对于（选项中的var名称）{
var src = target [name]，copy = options [name];
if（target ===复制）
继续;
if（deep && copy && typeof copy ===“ object” &&！copy.nodeType）{
target [name] = gragments.callee（deep，src ||（copy.length！= null？[]：{}），copy）;
}
否则（复制！==未定义）
目标[名称] =复制;
}
}
返回目标；
};
//复制JQ
window.each = function（对象，回调，args）{
var名称，i = 0，长度= object.length;
如果（args）{
args = array.prototype.slice.call（gragments）.slice（2）;
if（length === undefined）{
对于（对象中的名称）
if（callback.apply（对象[名称]，[名称，对象[name]]。concat（args））=== false）
休息;
} 别的
for（; i <长度; i ++）
if（callback.apply（object [i]，[i，object [i]]。concat（args））=== false）//
休息;
} 别的 {
if（length === undefined）{
对于（对象中的名称）
if（callback.call（object [name]，name，object [name]）=== false）
休息;
} 别的
for（var value =对象[0];
i <length && callback.call（value，i，value）！== false;值=对象[++ i]）{}
}
返回对象；
};
window.currentStyle = function（element）{
返回元素。CurrentStyle|| document.defaultview.getCompentedstyle（element，null）;
};
window.objpos = function（elem）{
var左= 0，top = 0，右= 0，底部= 0，doc = elem？ elem.ownerdocument：文档；
if（！elem.getBoundingClientRect || window.sys.ie8）
var n = elem;
while（n）{左 += n.offsetleft，top += n.offsettop; n = n.offsetparent; };
右=左 + Elem.OffSetWidth;底部= top + elem.offsetheight;
} 别的 {
var rect = elem.getBoundingClientRect（）;
左=右= doc.documentElement.scrollleft || doc.body.scrollleft;
top = bottom = doc.documentElement.scrollleft || doc.body.scrollleft;
左 += rect.left;右 += rect.right;
top += rect.top;底部 += rect.bottom;
}
返回{“左”：左，“ top”：top，“右”：右，“底部”：bottom};
};
window.hasclass = function（element，className）{
return Element.ClassName.Match（new Regexp（'（// s |^）'+className+'（// s | $）'））;
};
window.addclass = function（element，className）{
！
};
window.removeclass = function（element，className）{
window.hasclass（element，className）&&（element.ClassName = element.ClassName.replace（new Regexp（'（// s |^）'+className+'（// s | $）'），'），'），）;
}
}）（窗户）;
var drag = {
Elem：NULL，
zindex：0，
选项 ： {}，
init：function（）{
每个（参数，函数（i，elem，othis）{
AddListener（Elem，“ Mousedown”，BindaseVentListener（Othis，othis.start，Elem））;
}，这）;
}，，
开始：功能（E，Elem）{
var elem = this.elem = elem;
Elem.Style.Zindex = ++ this.zindex;
this.x = e.clientx -elem.offsetleft;
this.y = e.clienty -elem.offsettop;
this.marginleft = parseint（CurrentStyle（Elem）.marginleft）|| 0;
this.margintop = parseint（currentstyle（elem）.margintop）|| 0;
sys.ie?elem.setCapture（）：e.preventDefault（）;
AddListener（文档，“ Mousemove”，BindaseVentListener（this，this.move））;
addListener（文档，“鼠标”，bind（this，this.up））;
this.options.callbackmove && this.options.callbackmove（this.elem）;
}，，
移动：功能（e）{
window.getSelection？ window.getSelection（）。removeAllranges（）：document.selection.empty（）;
var ileft = e.clientx -this.x，itop = e.clienty -this.y; obj = this.elem;
obj.style.left = ileft -this.marginleft +“ px”;
obj.style.top = itop -this.margintop +“ px”;
this.options.callbackmove && this.options.callbackmove（this.elem）;
}，，
向上：function（）{
removelistener（文档，“ mousemove”）；
removelistener（文档，'MouseUp'）;
sys.ie && this.elem.releasecapture（）;
this.options.callbackup && this.options.callbackup（this.elem）;
}
};
var重叠= {
旅馆：{}，//所有需要计算重合的元素
超级列表：{}，//已经重合的元素
init：function（elems）{
每个（elems，函数（i，elem，othis）{
elem.setAttribute（'重叠'，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：rightbottomdot：{x：r，y：r，y：r，y：b}}};
}，这）;
}，，
setElem：function（elem）{
如果（！elem）返回；
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：x：l，y：b}，righttopdot：righttopdot：{x：x：x：r，y：r，y：r，y：t}，rightbottomdot：
}，，
//判断是否重合
isOverLap：function（my）{
var obj = {}，my = this.hostel [my.getAttribute（'ryplap'）];
每个（this.hostel，函数（键，config，othis）{
//是元素本身是元素本身
if（config.elem === my.elem）返回;
//判断2个div是否重合如果不重合则返回
if（my.leftbottomdot.y <= config..lefttopdot.y || my.lefttopdot.y> = config..leftbottomdot.y || my.rightopdot.x <= config..lefttopdot.x |
返回;
obj [config.elem.getAttribute（'reverlap'）] = [config.elem，othis.howoverlap（my，config）];
}，这）;
返回obj;
}，，
//判断重合面积
HowOverLap：功能（我的，其他）{
var l = other.LeftBottomDot.x，r = other.righttopdot.x，t = other.lefttopdot.y，b = eleth.leftbottomdot.y，arr = []，
lt = this。
lb = this。
rt = this。
rb = this。
lt && arr.push（lt）|| lb && arr.push（lb）|| rt && arr.push（rt）|| rb && arr.push（rb）;
如果（！arr [0]）返回0;
//一个点一个点一个点个点都在其中个点都在其中个点都在其中
if（arr.length === 1 || arr.length === 2）{
var key = arr [0] .split（' - '），x1 = my [key [key [0]]。x，y1 = my [key [key [key [0]]。
返回Math.Abs（（x1-x2）*（y1-y2））;
};
//完全重合
if（arr.length === 4）{
返回162*162;
};
}，，
//看点是不是在另一个div
包括：函数（DOT，L，R，T，B，KEY）{
返回（dot.x> = l && dot.x <= r && dot.y> = t && dot.y <= b）？key：false;
}
};
window.onload = function（）{
扩展（drag.options，{callbackmove：move，callbackup：up}）;
功能向上（Elem）{
对于（重叠中的var n。
removeclass（重叠。overlaplist[n] [0]，'focus'）
Overlap.overlaplist = {};
drag.elem.innerhtml = drag.elem.id;
};
功能移动（Elem）{
重叠。Setelem（Elem）;
// p为判断返回的obj
var obj = offlap.isoverlap（elem），name，p = function（o）{
对于（o中的名称）
返回false;
返回true;
}（obj）;
//如果是个空对象如果是个空对象
如果（p）{
向上（）;
返回;
};
var str ='';
重叠。跨plaplist = obj;
每个（重叠。hostel，函数（键，config）{
如果（obj [key]）{
addClass（obj [key] [0]，'focus'）;
str = str+'与'+obj [key] [0] .id+'重合的面积为：'+obj [key] [1]+'</br>';
}别的{
removeclass（config.elem，'focus'）;
}
}）;
drag.elem.innerhtml = str;
};
drag.init（$（'demo1'），$（'demo2'），$（'demo3'），$（'demo4'），$（'demo5'），$（'emo6'），$（demo7'），$（'demo7'），$（'emo8'），$（'emo8'），$（'demo9''demo9'）;
ORPLAP.INIT（[$（'demo1'），$（'demo2'），$（'demo3'），$（'demo4'），$（demo5'），$（'demo6'），$（'demo7'），$（'demo7'），$（'demo8'），$（'demo8'），$（'demo9'））;
};
</script>
</body>
</html>
代码如上，只是感觉效率有点低，小伙伴们有没有什么优化方案呢，还请告之，不胜感激