复制代码代码如下::
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = gb2312" />
<title> Tabelle </title>
</head>
<style type = "text/css">
Körper {Margin: 0px; Polsterung: 0px; Schriftgröße: 12px}
.div {Höhe: 160px; Breite: 160px; Position: absolut; Text-Align: Mitte; }
.demo1 {Border: 1PX Solid #96c2f1; Hintergrundfarbe: #Eff7ff; links: 150px; Top: 20px}
.demo2 {Border: 1px Solid #9bdf70; Hintergrundfarbe: #f0fbeb; links: 450px; oben: 20px}
.demo3 {Border: 1px Solid #bbe1f1; Hintergrundfarbe: #eefaff; links: 750px; Top: 20px}
.demo4 {Border: 1PX Solid #96C2F1; Hintergrundfarbe: #eefaff; links: 150px; oben: 220px}
.demo5 {Border: 1PX Solid #ffcc00; Hintergrundfarbe: #fffff7; links: 450px; oben: 220px}
.demo6 {Border: 1px Solid #e3e197; Hintergrundfarbe: #ffffdd; links: 750px; oben: 220px}
.demo7 {Border: 1px Solid #adcd3c; Hintergrundfarbe: #f2fddb; links: 150px; oben: 420px}
.demo8 {Border: 1px Solid #f8b3d0; Hintergrundfarbe: #fff5fa; links: 450px; oben: 420px}
.demo9 {Border: 1px Solid #d3d3d3; Hintergrundfarbe: #f7f7f7; links: 750px; oben: 420px}
.Focus {Hintergrundfarbe: #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">
(Funktion (Fenster, undefiniert) {
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 = "";
für (var i in b) {
if (b [i]) {vmark = "safari" == i? "Version": i; brechen; }
}
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;
Rückkehr B;
} (window.navigator.useragent.tolowerCase ());
window.sys.ie6 && document.execcommand ("HintergrundImageCache", false, true);
Fenster. $ = Funktion (id) {
return document.getElementById (id);
};
window.addListener = Funktion (Element, e, fn) {
! element.events && (element.events = {});
element.events [e] && (element.events [e] [addierener.guid ++] = fn) || (element.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 Handler = element.events [e], Typ;
if (fn) {
für (eingeben in Handlern)
if (Handler [Typ] === fn) {
Element.RemoveEventListener? Element.RemoveEventListener (e, fn, false): Element.DetAchEvent ("on" + e, fn);
Handler löschen [Typ];
}
}anders{
für (eingeben in Handlern) {
element.removeEventListener? element.removeEventListener (E, Handler [Typ], False): Element.DetACHEvent ("on" + E, Handler [Typ]);
Handler löschen [Typ];
}
}
};
window.setStyle = function (e, o) {
if (typeof o == "String")
E.Style.CSSTEXT = O;
anders
für (var i in o)
E.Style [i] = o [i];
};
var Slice = Array.Prototype.slice;
window.bind = Funktion (Objekt, Spaß) {
var args = Slice.call (Argumente) .Slice (2);
return function () {
return Fun.Apply (Objekt, Args);
};
};
window.bindaseventListener = Funktion (Objekt, Spaß, args) {
var args = Slice.call (Argumente) .Slice (2);
Rückgabefunktion (Ereignis) {
return Fun.Apply (Objekt, [Ereignis || window.event] .concat (args));
}
};
// Kopie aus JQ
window.extend = function () {
var target = argumente [0] || {}, i = 1, Länge = Argumente.length, Deep = true, Optionen;
if (typeof target === "boolean") {
Deep = Ziel;
Ziel = Argumente [1] || {};
i = 2;
}
if (typeof target! == "Object" && object.prototype.toString.call (Ziel)!
target = {};
für (; i <länge; i ++) {
if ((Optionen = Argumente [i])! = NULL)
für (var name in Optionen) {
var src = target [name], copy = options [name];
if (Ziel === Kopie)
weitermachen;
if (Deep && copy && typeof copy === "Objekt" &&! copy.nodetype) {
target [name] = argumente.callee (tiefe, src || (copy.length! = null? []: {}), copy);
}
sonst wenn (kopieren! == undefiniert)
Ziel [Name] = Kopie;
}
}
Ziel zurückgeben;
};
// Kopie aus JQ
Fenster.each = Funktion (Objekt, Rückruf, args) {
var name, i = 0, Länge = Objekt.Length;
if (args) {
args = array.prototype.slice.call (Argumente) .Slice (2);
if (Länge === undefiniert) {
für (Name im Objekt)
if (callback.apply (Objekt [Name], [Name, Objekt [Name]]. concat (args)) === false)
brechen;
} anders
für (; i <länge; i ++)
if (callback.apply (Objekt [i], [i, Objekt [i]]. concat (args)) === false) //
brechen;
} anders {
if (Länge === undefiniert) {
für (Name im Objekt)
if (callback.call (Objekt [Name], Name, Objekt [Name]) === false)
brechen;
} anders
für (var value = object [0];
I <Länge && callback.call (Wert, ich, Wert)! == false; value = Object [++ i]) {}
}
Objekt zurückgeben;
};
window.currentStyle = Funktion (Element) {
return element.currentStyle || document.DefaultView.getComputedStyle (Element, NULL);
};
window.objpos = function (elem) {
var links = 0, top = 0, rechts = 0, boden = 0, doc = elem? Elem.OwnerDocument: Dokument;
if (! Elem.getBoundingClientRect || window.sys.ie8) {
var n = elem;
while (n) {links += n.offsetleft, top += n.offsettop; n = n.offsetParent; };
rechts = links + Elem.Offsetwidth; unten = ober + elem.offseteight;
} anders {
var rect = elem.getBoundingClientRect ();
links = rechts = doc.documentElement.scrollleft || doc.body.scrollleft;
ober = boden = doc.documentElement.scrollleft || doc.body.scrollleft;
links += rect.left; rechts += rect.Right;
ober += rect.top; unten += rect.bottom;
}
Rückkehr {"links": links, "oben": oben, "rechts": rechts, "unten": unten};
};
window.hasclass = function (element, className) {
return element.className.match (neuer 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 (neuer regexp ('(// s |^)'+className+'(// s | $)'), ''));
}
})(Fenster);
var drag = {
Elem: Null,
Zindex: 0,,
Optionen: {},
init: function () {
Jede (Argumente, Funktion (i, Elem, Othis) {
Addierener (Elem, 'MouseDown', BindaseventListener (Othis, Othis.start, Elem));
},Das);
},
Start: Funktion (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 ();
Addierener (Dokument, "Mousemove", BindaseventListener (this, this.move));
Addierener (Dokument, "Mauseup", binden (this, this.up));
this.options.callbackMove && this.options.callbackMove (this.elem);
},
Bewegung: Funktion (e) {
Fenster.Getelection? 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 (Dokument, 'Mousemove');
Removelistener (Dokument, 'Mauseup');
Sys.ie && this.elem.releascapture ();
this.options.callbackup && this.options.callbackup (this.elem);
}
};
var überlappung = {
Hostel: {}, // 所有需要计算重合的元素
Überlappungsliste: {}, // 已经重合的元素
init: function (elems) {
Jede (Elems, Funktion (i, elem, othis) {
Elem.Setattribute ('Überlappung', i);
var ret = objpos (elem), l = ret.left, t = ret.top, b = ret.bottom, r = ret.Right;
othis.hostel [i] = {elem: elem, linksTopdot: {x: l, y: t}, linkBottomdot: {x: l, y: b}, righttopdot: {x: r, y: t}, rightbottomDot: {x: r, y: b}};
},Das);
},
setElem: function (elem) {
if (! Elem) kehre zurück;
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 ('überlappend')];
jeweils (this.hostel, Funktion (Schlüssel, Konfiguration, 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.x.x)
zurückkehren;
obj [config.elem.getAttribute ('überlappend')] = [config.elem, othis.howoverlap (my, config)];
},Das);
Rückkehr obj;
},
// 判断重合面积
howoverlap: function (my, andere) {
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, 'linksTopdot-rightbottomdot'),
lb = this.include (my.leftbottomdot, l, r, t, b, 'linkbottomdot-righttopdot'),
rt = this.include (my.righttopdot, l, r, t, b, 'righttopdot-linksbottomdot'),
rb = this.include (my.rightbottomdot, l, r, t, b, 'rightbottomdot-linftTopdot');
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 [taste [0]]. x, y1 = my [taste [0]].
return math.abs ((x1-x2)*(y1-y2));
};
// 完全重合
if (arr.length === 4) {
Rückkehr 162*162;
};
},
// 看点是不是在另一个 div 中
Einschließen: Funktion (dot, l, r, t, b, key) {
return (dot.x> = l && dot.x <= r && dot.y> = t && dot.y <= b)? Schlüssel: false;
}
};
window.onload = function () {
Extend (Drag.Options, {CallbackMove: Move, Callbackup: up});
Funktion up (elem) {
für (var n in Überlappung.OverlapList)
removeclass (überlap.overlapList [n] [0], 'Focus')
Overlap.OverlapList = {};
Drag.Elem.innerhtml = Drag.elem.id;
};
Funktionsbewegung (Elem) {
Überlappung.Setelem (Elem);
// p 为判断返回的 obj 是不是空的
var obj = überlappend.isoverlap (elem), name, p = function (o) {
für (Name in o)
false zurückgeben;
zurückkehren;
} (obj);
// 如果是个空对象 则返回 不进行下面的遍历
if (p) {
hoch();
zurückkehren;
};
var str = '';
Überlappung.OverlapList = OBJ;
jeweils (überlappend.Hostel, Funktion (Schlüssel, Konfiguration) {
if (obj [key]) {
AddClass (OBJ [Schlüssel] [0], 'Focus');
str = str+'与'+obj [Schlüssel] [0] .id+'重合的面积为:'+obj [Schlüssel] [1]+'</br>';
}anders{
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>
代码如上 ， 只是感觉效率有点低 ， 小伙伴们有没有什么优化方案呢 ， 还请告之 ， 不胜感激 不胜感激