复制代码代码如下：
<！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>表</title>
</head>
<style type = "text/css">
ボディ{マージン：0px;パディング：0px;フォントサイズ：12px}
.div {height：160px; width：160px; position：absolute;テキストアライグ：センター; }
.demo1 {border：1px solid＃96c2f1; background-color：＃eff7ff;左：150px;トップ：20px}
.demo2 {border：1px solid＃9bdf70; background-color：＃f0fbeb;左：450px;トップ：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;左：750px;トップ：220px}
.demo7 {border：1px solid＃adcd3c; background-color：＃f2fddb; left：150px; top：420px}
.demo8 {border：1px solid＃f8b3d0; background-color：＃fff5fa;左：450px;トップ：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>
<スクリプト言語= "javascript">
（関数（ウィンドウ、未定義）{
window.sys = function（ua）{
var b = {
ie：/msie/.test(uua）&&！/pera/.test（ua）、
Opera：/pera/.test(uua）、
safari：/webkit/.test(uua）&&！/chrome/.test（ua）、
firefox：/firefox/.test(uua）、
Chrome： /chrome/.test(uua）
}、vmark = "";
for（b in bin）{
if（b [i]）{vmark = "safari" == i？ 「バージョン」：i;壊す; }
}
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;
bを返します。
}（window.navigator.useragent.tolowercase（））;
window.sys.ie6 && document.execcommand（ "backgroundimagecache"、false、true）;
window。$ = function（id）{
document.getElementByID（ID）を返します。
};
window.addlistener = function（element、e、fn）{
！element.events &&（element.events = {}）;
Element.Events [e] &&（element.events [e] [addlistener.guid ++] = fn）||（ement.events [e] = {'0'：fn}）;
element.addeventlistener？element.addeventlistener（e、fn、false）：element.attachevent（ "on" + e、fn）;
};
window.addlistener.guid = 1;
window.removelistener = function（element、e、fn）{
var handlers = element.events [e]、type;
if（fn）{
for（ハンドラーを入力）
if（handlers [type] === fn）{
element.RemoveEventListener？element.RemoveEventListener（e、fn、false）：element.detachevent（ "on" + e、fn）;
ハンドラーを削除[タイプ];
}
}それ以外{
for（タイプインハンドラー）{
element.RemoveEventListener？element.RemoveEventListener（e、handlers [type]、false）：element.detachevent（ "on" + e、handlers [type]）;
ハンドラーを削除[タイプ];
}
}
};
window.setStyle = function（e、o）{
if（typeof o == "string"）
e.style.csstext = o;
それ以外
for（var i in o）
e.Style [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = function（object、fun）{
var args = slice.call（arguments）.slice（2）;
return function（）{
return fun.apply（object、args）;
};
};
window.bindaseventlistener = function（object、fun、args）{
var args = slice.call（arguments）.slice（2）;
return function（event）{
return fun.apply（object、[event || window.event] .concat（args））;
}
};
// JQからコピーします
window.extend = function（）{
var target = arguments [0] || {}、i = 1、length = arguments.length、deep = true、options;
if（typeof target === "boolean"）{
deep =ターゲット;
ターゲット=引数[1] || {};
i = 2;
}
if（typeof target！== "object" && object.prototype.tostring.call（ターゲット）！= "[オブジェクト関数]"）
ターゲット= {};
for（; i <length; i ++）{
if（（options = arguments [i]）！= null）
for（optionsのvar名）{
var src =ターゲット[name]、copy = options [name];
if（ターゲット===コピー）
続く;
if（deep && copy && typeof copy === "object" &&！copy.nodetype）{
ターゲット[name] = arguments.callee（deep、src ||（copy.length！= null？[]：{}）、copy）;
}
else if（copy！== undefined）
ターゲット[name] = copy;
}
}
ターゲットを返します。
};
// JQからコピーします
window.each = function（object、callback、args）{
var name、i = 0、length = object.length;
if（args）{
args = array.prototype.slice.call（arguments）.slice（2）;
if（length === undefined）{
for（オブジェクトの名前）
if（callback.apply（object [name]、[name、object [name]]。concat（args））=== false）
壊す;
} それ以外
for（; i <length; i ++）
if（callback.apply（object [i]、[i、object [i]]。concat（args））=== false）//
壊す;
} それ以外 {
if（length === undefined）{
for（オブジェクトの名前）
if（callback.call（object [name]、name、object [name]）=== false）
壊す;
} それ以外
for（var value = object [0];
i <length && callback.call（value、i、value）！== false; value = object [++ i]）{}
}
オブジェクトを返します。
};
window.currentStyle = function（element）{
return element.currentstyle || document.defaultview.getComputedStyle（element、null）;
};
window.objpos = function（elem）{
var left = 0、top = 0、右= 0、bottom = 0、doc = elem？ Elem.Owndocument：document;
if（！elem.getBoundingClientRect || window.sys.ie8）{
var n = elem;
while（n）{left += n.offsetLeft、top += n.offsettop; n = n.offsetparent; };
右=左 + elem.offsetwidth; bottom = 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; bottom += rect.bottom;
}
return {"left"：left、 "top"：top、 "right"：right、 "bottom"：bottom};
};
window.hasclass = function（element、classname）{
return element.classname.match（new regexp（ '（// s |^）'+className+'（// s | $）'））;
};
window.addclass = function（element、className）{
！window.hasclass（element、classname）&&（element.classname += "" +className）;
};
window.removeclass = function（element、className）{
window.hasclass（element、classname）&&（element.classname = element.classname.replace（new regexp（ '（// s |^）'+className+'（// s | $）'）、 ''））;
}
}）（ウィンドウ）;
var drag = {
エレム：ヌル、
Zindex：0、
オプション：{}、
init：function（）{
それぞれ（引数、関数（i、elem、othis）{
addListener（Elem、 'Mousedown'、BindaseventListener（othis、othis.start、elem））;
}、これ）;
}、
start：function（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（document、 "mousemove"、bindaseventlistener（this、this.move））;
addListener（document、 "mouseup"、bind（this、this.up））;
this.options.callbackmove && this.options.callbackmove（this.elem）;
}、
移動：function（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）;
}、
up：function（）{
Removelistener（document、 'mousemove'）;
Removelistener（document、 'mouseup'）;
sys.ie && this.elem.releasecapture（）;
this.options.callbackup && this.options.callbackup（this.elem）;
}
};
var overlap = {
ホステル：{}、//所有需要计算重合的元素
オーバーラップリスト：{}、//已经重合的元素
init：function（elems）{
それぞれ（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}};
}、これ）;
}、
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'）];
それぞれ（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.righttdot.x）
戻る;
obj [config.elem.getattribute（ 'overlap'）] = [config.elem、othis.howoverlap（my、config）];
}、これ）;
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）{
162*162を返します。
};
}、
//看点是不是在另一个div中
含める：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（）{
拡張（drag.options、{callbackmove：move、callbackup：up}）;
function up（elem）{
for
Removeclass（overlap.Overlaplist [n] [0]、 'focus'）
overlap.overlaplist = {};
drag.elem.innerhtml = drag.elem.id;
};
関数移動（ELEM）{
overlap.setelem（elem）;
// p为判断返回的obj是不是空的
var obj = overlap.isoverlap（elem）、name、p = function（o）{
for（oの名前）
falseを返します。
trueを返します。
}（obj）;
//如果是个空对象如果是个空对象则返回
if（p）{
上（）;
戻る;
};
var str = '';
overlap.overlaplist = obj;
それぞれ（overlap.hostel、function（key、config）{
if（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'）、$（ 'demo6'）、$（ 'demo7'）、$（ 'demo8'）、$（ 'demo9'））;
overlap.init（[$（ 'demo1'）、$（ 'demo2'）、$（ 'demo3'）、$（ 'demo4'）、$（ 'demo5'）、$（ 'demo6'）、$（ 'demo7'）、$（ 'demo8'）、$（ 'demo9'）]）;
};
</script>
</body>
</html>
代码如上、只是感觉效率有点低、小伙伴们有没有什么优化方案呢、还请告之、不胜感激