複製代碼代碼如下：
<！ 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>
代碼如上，只是感覺效率有點低，小伙伴們有沒有什麼優化方案呢，還請告之，不勝感激