复制代码代码如下:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-bransitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> tabela </title>
</head>
<style type = "text/css">
corpo {margem: 0px; preenchimento: 0px; Size da fonte: 12px}
.div {altura: 160px; largura: 160px; posição: absoluto; Alinhamento de texto: centro; }
.Demo1 {Border: 1px Solid #96C2f1; cor de fundo: #eff7ff; esquerda: 150px; topo: 20px}
.demo2 {borda: 1px Solid #9bdf70; cor de fundo: #f0fbeb; esquerda: 450px; topo: 20px}
.Demo3 {Border: 1px Solid #BBE1f1; cor de fundo: #eefaff; esquerda: 750px; topo: 20px}
.Demo4 {Border: 1px Solid #96C2F1; Background-Color: #eefaff; esquerda: 150px; topo: 220px}
.demo5 {borda: 1px Solid #ffcc00; cor de fundo: #fffff7; esquerda: 450px; topo: 220px}
.Demo6 {Border: 1px Solid #e3e197; cor de fundo: #ffffdd; esquerda: 750px; topo: 220px}
.demo7 {borda: 1px Solid #adcd3c; cor de fundo: #f2fddb; esquerda: 150px; topo: 420px}
.demo8 {borda: 1px Solid #f8b3d0; cor de fundo: #fff5fa; esquerda: 450px; topo: 420px}
.demo9 {borda: 1px Solid #d3d3d3; cor de fundo: #f7f7f7; esquerda: 750px; topo: 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>
<Script Language = "JavaScript">
(função (janela, indefinida) {
window.sys = function (ua) {
var b = {
ou seja: /msie/.test(ua) &&! /opera/.test (ua),
ópera: /opera/.test(ua),
safari: /webkit/.test(ua) &&! /chrome/.test (ua),
firefox: /firefox/.test(ua),
Chrome: /chrome/.test(ua)
}, vmark = "";
para (var i em b) {
if (b [i]) {vmark = "safari" == i? "Versão": i; quebrar; }
}
B.Version = vmark && regexp ("(?:" + vmark + ") [///:] ([// d.] +)"). Teste (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;
retornar b;
} (window.navigator.userragent.tolowercase ());
window.sys.ie6 && document.execCommand ("BackgroundImageCache", false, true);
janela. $ = function (id) {
retornar document.getElementById (id);
};
window.addlistener = função (elemento, 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" + e, fn);
};
window.addlistener.guid = 1;
window.removelistener = function (elemento, e, fn) {
var manipuladores = element.events [e], tipo;
if (fn) {
para (digite os manipuladores)
if (manipuladores [tipo] === fn) {
Element.RemoveEventListener? Element.RemoveEventListener (E, Fn, False): Element.Detachevent ("On" + E, Fn);
excluir manipuladores [tipo];
}
}outro{
para (tipo de manipuladores) {
element.RemoveEventListener? Element.RemoveEventListener (E, Handlers [Type], False): Element.Detachevent ("On" + E, Handlers [Type]);
excluir manipuladores [tipo];
}
}
};
window.setStyle = função (e, o) {
if (typeof o == "string")
e.style.csStext = O;
outro
para (var i em o)
e.style [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = function (objeto, diversão) {
var args = slice.call (argumentos) .Slice (2);
Return function () {
retornar divertido.Apply (objeto, args);
};
};
window.bindaseventListener = function (objeto, diversão, args) {
var args = slice.call (argumentos) .Slice (2);
Função de retorno (evento) {
return Fun.Apply (Object, [Event || Window.Event] .Concat (args));
}
};
// Copiar de Jq
window.extend = function () {
VAR Target = Argumentos [0] || {}, i = 1, comprimento = argumentos.Length, Deep = true, opções;
if (typeof alvo === "boolean") {
Deep = Target;
Target = argumentos [1] || {};
i = 2;
}
if (typeof Target! == "Object" && Object.prototype.toString.Call (Target)! = "[Função do objeto]"))
Target = {};
para (; i <comprimento; i ++) {
if ((opções = argumentos [i])! = nulo)
para (Var Nome in Options) {
var src = Target [nome], copy = options [nome];
if (Target === cópia)
continuar;
if (Deep && cópia && typeof cópia === "object" &&! copy.nodetype) {
Target [nome] = argumentos.Callee (Deep, src || (copy.length! = null? []: {}), copy);
}
caso contrário, se (cópia! == indefinido)
Target [nome] = cópia;
}
}
alvo de retorno;
};
// Copiar de Jq
window.each = function (objeto, retorno de chamada, args) {
Var nome, i = 0, comprimento = object.Length;
if (args) {
args = array.prototype.slice.call (argumentos) .slice (2);
if (comprimento === indefinido) {
para (nome em objeto)
if (callback.apply (objeto [nome], [nome, objeto [nome]]. concat (args)) === false)
quebrar;
} outro
para (; i <comprimento; i ++)
if (retorno de chamada.apply (objeto [i], [i, objeto [i]]. concat (args)) === false) //
quebrar;
} outro {
if (comprimento === indefinido) {
para (nome em objeto)
if (retorno de chamada.call (objeto [nome], nome, objeto [nome]) === false)
quebrar;
} outro
for (var value = objeto [0];
i <comprimento && callback.call (valor, i, valor)! == false; valor = objeto [++ i]) {}
}
objeto de retorno;
};
window.currentStyle = function (elemento) {
Return Element.CurrentStyle || document.defaultView.getComputedStyle (elemento, null);
};
window.objpos = function (elem) {
var esquerdo = 0, topo = 0, direita = 0, inferior = 0, doc = elem? elem.wnerdocument: document;
if (! Elem.getBoundingClientRect || window.sys.ie8) {
var n = elem;
while (n) {esquerda += n.offsetLeft, top += n.offsettop; n = n.offsetParent; };
direita = esquerda + elem.offsetWidth; Bottom = top + elem.offsetHeight;
} outro {
var ret = elem.getBoundingClientRect ();
Esquerda = direita = doc.documentElement.scrollleft || doc.body.scrollleft;
Top = Bottom = doc.documentElement.scrollleft || doc.body.scrollleft;
esquerda += ret.left; à direita += rect.right;
top += ret.top; inferior += rect.bottom;
}
retornar {"esquerda": esquerda, "top": top, "direita": direita, "inferior": inferior};
};
window.hasclass = function (elemento, classe) {
Return element.className.match (novo regexp ('(// s |^)'+className+'(// s | $)'));
};
window.addclass = function (elemento, className) {
! window.hasclass (elemento, classe) && (element.className += "" +ClassName);
};
window.removeClass = function (elemento, classe) {
window.hasclass (elemento, classe) && (element.className = element.className.replace (new regexp ('(// s |^)'+className+'(// s | $)'), '' '));
}
})(janela);
var drag = {
elem: nulo,
Zindex: 0,
Opções: {},
init: function () {
cada (argumentos, função (i, elem, othis) {
addListener (elem, 'mousedown', bindaseventListener (Othis, Othis.start, elem));
},esse);
},
Iniciar: 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 (documento, "mousemove", bindaseventListener (this, this.move));
addListener (documento, "mouseup", bind (this, this.up));
this.options.callbackmove && this.options.callbackmove (this.Elem);
},
Move: function (e) {
Window.GetSelection? window.getSelection (). removeallLanges (): 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 = {
Hostel: {}, // 所有需要计算重合的元素
sobreposição: {}, // 已经重合的元素
init: function (elems) {
cada (elems, função (i, elem, othis) {
elem.setattribute ('sobreposição', 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}, esquerdabottomDot: {x: l, y: b}, righttopDot: {x: r, y: t}, rightbottomdot: {x: r, y: b};};;
},esse);
},
setElem: function (elem) {
se (! elem) retornar;
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 ('sobreposição')];
cada (this.hostel, função (chave, configuração, othis) {
// 是元素本身 则返回
if (config.elem === my.Elem) retornar;
// 判断 2 个 div 是否重合 如果不重合 则返回
if (my.leftbottomdot.y <= config.lefttopdot.y || my.lefttopdot.y> = config.leftbottomdot.y || my.righttopDot.x <= config.lefttopdot.x || my.lefttopdot.x>
retornar;
obj [config.elem.getAttribute ('sobreposição')] = [config.elem, othis.howoverlap (my, config)];
},esse);
retornar obj;
},
// 判断重合面积
Howoverlap: function (meu, outro) {
var l = outros.leftbottomdot.x, r = outros.righttopDot.x, t = outros.lefttopdot.y, b = outros.leftbottomdot.y, arr = [],,
lt = this.include (my.lefttopdot, l, r, t, b, 'lefttopdot-rightbottomDot'),
lb = this.include (my.leftbottomdot, l, r, t, b, 'esquerdabottomdot-righttopdot'),
rt = this.include (my.righttopDot, l, r, t, b, 'righttopdot-leftbottomDot'),
rb = this.include (my.rightbottomDot, l, r, t, b, 'remendbottomdot-lefttopdot');
lt && arr.push (lt) || lb && arr.push (lb) || rt && arr.push (rt) || rb && arr.push (rb);
if (! arr [0]) retornar 0;
// 一个点 或者是 2 个点都在其中 计算方法是一样的
if (arr.Length === 1 || arr.length === 2) {
var chave = arr [0] .split ('-'), x1 = my [chave [0]]. x, y1 = minha [chave [0]]. y, x2 = outro [chave [1]. x, y2 = outro [chave [1]]. y;
retornar math.abs ((x1-x2)*(y1-y2));
};
// 完全重合
if (arr.Length === 4) {
retornar 162*162;
};
},
// 看点是不是在另一个 Div 中
Inclua: função (dot, l, r, t, b, key) {
return (dot.x> = l && dot.x <= r && dot.y> = t && dot.y <= b)? chave: false;
}
};
window.onload = function () {
estender (drag.options, {callbackmove: mover, recompensa de chamada: up});
função up (elem) {
para (var n em sobreposição.overlaplist)
removeclass (sobreposição.overlaplist [n] [0], 'foco')
sobreposição.overlapList = {};
Drag.Elem.innerhtml = drag.elem.id;
};
função move (elem) {
sobreposição.setElem (elem);
// P 为判断返回的 Obj 是不是空的
var obj = sobreposição.isoverlap (elem), nome, p = function (o) {
para (nome em O)
retornar falso;
retornar true;
} (obj);
// 如果是个空对象 则返回 不进行下面的遍历
if (p) {
acima();
retornar;
};
var str = '';
sobreposição.overlapList = obj;
cada (sobreposição.hostel, função (chave, configuração) {
if (obj [key]) {
addclass (obj [key] [0], 'focus');
str = str+'与'+obj [key] [0] .id+'重合的面积为:'+obj [key] [1]+'</br>';
}outro{
removeclass (config.elem, 'focus');
}
});
Drag.Elem.innerhtml = str;
};
Drag.init ($ ('Demo1'), $ ('Demo2'), $ ('Demo3'), $ ('Demo4'), $ ('Demo5'), $ ('Demo6'), $ ('Demo7'), $ ('Demo8'), $ ('Demo9');
sobrever.init ([$ ('Demo1'), $ ('Demo2'), $ ('Demo3'), $ ('Demo4'), $ ('Demo5'), $ ('Demo6'), $ ('Demo7'), $ ('Demo8'), $ ('Demo9')]);
};
</script>
</body>
</html>
代码如上 ， 只是感觉效率有点低 ， 小伙伴们有没有什么优化方案呢 ， 还请告之 ， 不胜感激