复制代码代码如下:
<! 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">
<adal>
<meta http-equiv = "content-type" content = "text / html; charset = gb2312" />
<Title> Table </Title>
</ head>
<style type = "text / css">
corps {marge: 0px; rembourrage: 0px; taille de police: 12px}
.Div {hauteur: 160px; largeur: 160px; position: absolue; Texte-aligne: Centre; }
.Demo1 {Border: 1Px solide # 96C2F1; Background-Color: # eff7ff; gauche: 150px; top: 20px}
.Demo2 {Border: 1Px Solid # 9BDF70; Background-Color: # F0FBEB; gauche: 450px; top: 20px}
.Demo3 {Border: 1px solide # bbe1f1; fond-couleur: #EEFAFF; gauche: 750px; top: 20px}
.Demo4 {Border: 1Px Solid # 96C2F1; Background-Color: #EEFAFF; Left: 150px; top: 220px}
.Demo5 {Border: 1px solide # ffcc00; fond-couleur: # fffff7; gauche: 450px; top: 220px}
.Demo6 {Border: 1px solide # e3e197; fond-couleur: #ffffdd; gauche: 750px; en haut: 220px}
.Demo7 {Border: 1px solide # adcd3c; fond-couleur: # f2fddb; gauche: 150px; top: 420px}
.Demo8 {Border: 1px solide # f8b3d0; fond-couleur: # fff5fa; gauche: 450px; top: 420px}
.Demo9 {Border: 1px solide # d3d3d3; fond-couleur: # f7f7f7; gauche: 750px; en haut: 420px}
.focus {fond de fond: # 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 linguisse = "javascript">
(fonction (fenêtre, indéfinie) {
window.sys = fonction (ua) {
var b = {
ie: /msie/.test(ua) &&! /Opera/.Test (UA),
opéra: /Opera/.test(ua),
safari: /webkit/.test(ua) &&! /chrome/.test (ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
}, vmark = "";
pour (var i en b) {
if (b [i]) {vmark = "safari" == i? "Version": i; casser; }
}
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;
retour b;
} (window.navigator.useragent.tolowercase ());
window.sys.ie6 && document.execcommand ("backgroundImageCache", false, true);
fenêtre. $ = fonction (id) {
return document.getElementById (id);
};
window.addListener = fonction (élément, e, fn) {
! element.events && (élément.events = {});
element.events [e] && (élément.events [e] [addListener.guid ++] = fn) || (élément.events [e] = {'0': fn});
element.addeventListener? element.addeventListener (e, fn, false): element.attachevent ("on" + e, fn);
};
window.addListener.guid = 1;
window.removeListener = fonction (élément, e, fn) {
Var Handlers = element.Events [E], type;
if (fn) {
pour (tapez dans les gestionnaires)
if (Handlers [type] === fn) {
element.reMoveEventListener? Element.RemoveEventListener (E, FN, false): element.detachevent ("on" + e, fn);
supprimer les gestionnaires [type];
}
}autre{
pour (tapez dans les gestionnaires) {
element.reMoveEventListener? Element.RemoveEventListener (E, Handlers [Type], False): element.Detachevent ("ON" + E, Handlers [Type]);
supprimer les gestionnaires [type];
}
}
};
window.setStyle = fonction (e, o) {
if (typeof o == "String")
e.style.csstext = o;
autre
pour (var i in o)
e.style [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = fonction (objet, amusant) {
var args = Slice.Call (arguments) .slice (2);
return function () {
return fun.apply (objet, args);
};
};
window.bindaseventListener = fonction (objet, amusant, args) {
var args = Slice.Call (arguments) .slice (2);
return function (event) {
return fun.apply (objet, [événement || window.event] .Concat (args));
}
};
// Copie de JQ
window.extend = function () {
var cible = arguments [0] || {}, i = 1, longueur = arguments.length, deep = true, options;
if (typeof cible === "booléen") {
Deep = Target;
Target = arguments [1] || {};
i = 2;
}
if (typeof Target! == "Object" && object.prototype.tostring.call (cible)! = "[Fonction objet]")
Target = {};
pour (; i <length; i ++) {
if ((options = arguments [i])! = null)
pour (nom var dans les options) {
var src = cible [name], copy = options [name];
if (cible === copie)
continuer;
if (deep && copy && typeof copy === "objet" &&! copy.nodeType) {
cible [name] = arguments.callee (Deep, src || (copy.length! = null? []: {}), copy);
}
sinon si (copie! == Undefined)
Target [name] = copy;
}
}
cible de retour;
};
// Copie de JQ
window.each = function (objet, rappel, args) {
var name, i = 0, longueur = object.length;
if (args) {
args = array.prototype.slice.call (arguments) .slice (2);
if (longueur === Undefined) {
pour (nom dans l'objet)
if (callback.apply (objet [nom], [nom, objet [name]]. Concat (args)) === false)
casser;
} autre
pour (; i <durée; i ++)
if (callback.Apply (objet [i], [i, objet [i]]. Concat (args)) === false) //
casser;
} autre {
if (longueur === Undefined) {
pour (nom dans l'objet)
if (callback.call (objet [nom], nom, objet [name]) === false)
casser;
} autre
pour (var valeur = objet [0];
i <longueur && callback.call (valeur, i, valeur)! == false; valeur = objet [++ i]) {}
}
retour objet;
};
window.currentStyle = fonction (élément) {
return element.currentStyle || Document.DefaultView.getCompuledStyle (élément, null);
};
window.objpos = fonction (elem) {
var gauche = 0, top = 0, droit = 0, en bas = 0, doc = elem? elem.ownerDocument: document;
if (! elem.getBoundingClientRect || window.sys.ie8) {
var n = elem;
while (n) {Left + = n.offsetleft, top + = n.offsetTop; n = n.offsetparent; };
droite = gauche + elem.offsetWidth; en bas = top + elem.offsetheight;
} autre {
var rect = elem.getBoundingClientRect ();
Left = droite = doc.DocumentElement.Scrollleft || doc.body.scrollleft;
top = inférieur = doc.documentElement.scrollleft || doc.body.scrollleft;
gauche + = rect.left; droit + = rect.Right;
top + = rect.top; inférieur + = rect.bottom;
}
return {"gauche": gauche, "haut": haut, "droite": droite, "inférieur": en bas};
};
window.hasclass = function (élément, className) {
return element.classname.match (new regexp ('(// s | ^)' + classname + '(// s | $)'));
};
window.addclass = function (élément, className) {
! window.hasclass (élément, className) && (élément.classname + = "" + className);
};
window.RemoveClass = function (élément, className) {
window.hasclass (élément, className) && (élément.classname = element.classname.replace (new regexp ('(// s | ^)' + classname + '(// s | $)'), ''));
}
})(fenêtre);
var drag = {
elem: null,
Zindex: 0,
Options: {},
init: function () {
chacun (arguments, fonction (i, elem, othis) {
AddListener (Elem, 'Mousedown', BindAsventListener (Othis, Othis.start, Elem));
},ce);
},
Démarrer: fonction (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, "sourisp", bind (this, this.up));
this.options.callbackmove && this.options.callbackmove (this.elem);
},
Déplacement: fonction (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, «sourisp»);
Sys.ie && this.elem.releasecapture ();
this.options.callbackup && this.options.callbackup (this.elem);
}
};
var chevauchement = {
Hostel: {}, // 所有需要计算重合的元素
chevauchement: {}, // 已经重合的元素
init: function (elems) {
chacun (elems, fonction (i, elem, othis) {
elem.setAttribute («chevauchement», 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}, droitetopdot: {x: r, y: t}, lightbottomdot: {x: r, y: b}};
},ce);
},
selelem: function (elem) {
si (! elem) retourner;
var ret = objPos (elem), l = ret.left, t = ret.top, b = ret.bottom, r = ret.right;
this.hostel [elem.getAttribute ('super-chant')] = {elem: elem, LeftTopdot: {x: l, y: t}, LeftBottomDot: {x: l, y: b}, droite: {x: r, y: t};
},
// 判断是否重合
isOverlap: fonction (my) {
var obj = {}, my = this.hostel [my.getAttribute ('chevauchement')];
chacun (this.hostel, fonction (clé, 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)
retour;
obj [config.elem.getAttribute ('chevauchement')]] = [config.elem, othis.howoverlap (my, config)];
},ce);
retour obj;
},
// 判断重合面积
howoverlap: fonction (mon, autre) {
var l = autre.leftbottomdot.x, r = autre.Righttopdot.x, t = autre.leftTopdot.y, b = autre.leftbottomdot.y, arr = [],
lt = this.include (my.lefttopdot, l, r, t, b, «LeftTopdot-rightbottomdot»),
lb = this.include (my.leftbottomdot, l, r, t, b, «Leftomdot-rightTopdot»),
rt = this.include (My.RightTopdot, L, R, T, B, 'RightTopdot-LeftBottomdot'),,
rb = this.include (my.Rightbottomdot, l, r, t, b, 'justicebottomdot-leftTopdot');
lt && arr.push (lt) || lb && arr.push (lb) || rt && arr.push (rt) || rb && arr.push (rb);
if (! arr [0]) retourner 0;
// 一个点 或者是 2 个点都在其中 计算方法是一样的
if (arr.length === 1 || arr.length === 2) {
var key = arr [0] .split ('-'), x1 = ma [clé [0]]. x, y1 = ma [clé [0]]. y, x2 = autre [clé [1]]. x, y2 = autre [clé [1]]. y;
return math.abs ((x1-x2) * (y1-y2));
};
// 完全重合
if (arr.length === 4) {
retour 162 * 162;
};
},
// 看点是不是在另一个 div 中
Inclure: fonction (point, l, r, t, b, clé) {
return (dot.x> = l && dot.x <= r && dot.y> = t && dot.y <= b)? key: false;
}
};
window.onload = function () {
extension (drag.options, {callbackmove: move, callbackup: up});
fonction up (elem) {
pour (var n en super-clapage.Overlaplist)
recouper (superlap.Overlaplist [n] [0], «focus»)
super-ult.OverlapList = {};
Drag.elem.innerhtml = drag.elem.id;
};
Fonction Move (elem) {
overlap.setelem (elem);
// p 为判断返回的 obj 是不是空的
var obj = superlap.isoverlap (elem), nom, p = fonction (o) {
pour (nom en o)
retourne false;
Retour Vrai;
} (obj);
// 如果是个空对象 则返回 不进行下面的遍历
if (p) {
en haut();
retour;
};
var str = '';
super-ultime.OverlapList = obj;
chacun (super-ultime.hostel, fonction (clé, config) {
if (obj [key]) {
addClass (obj [key] [0], 'focus');
str = str + '与' + obj [key] [0] .id + '重合的面积为:' + obj [key] [1] + '</br>';
}autre{
reposerlass (config.elem, 'focus');
}
});
Drag.elem.innerhtml = str;
};
Drag.Init ($ ('Demo1'), $ ('Demo2'), $ ('Demo3'), $ ('Demo4'), $ ('Demo5'), $ ('Demo6'), $ ('Demo7'), $ ('Demo8'), $ ('Demo9');
super-ult.init ([$ ('Demo1'), $ ('Demo2'), $ ('Demo3'), $ ('Demo4'), $ ('Demo5'), $ ('Demo6'), $ ('Demo7'), $ ('Demo8'), $ ('Demo9'));
};
</cript>
</docy>
</html>
代码如上 ， 只是感觉效率有点低 ， 小伙伴们有没有什么优化方案呢 ， 还请告之 ， 不胜感激