复制代码代码如下:
<! DocType html public "-// w3c // dtd xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transicional.dtd ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> Table </title>
</ablo>
<style type = "text/css">
cuerpo {margen: 0px; relleno: 0px; tamaño de fuente: 12px}
.div {altura: 160px; ancho: 160px; posición: absoluto; Text-Align: Center; }
.demo1 {borde: 1px sólido #96c2f1; fondo de fondo: #eff7ff; izquierda: 150px; arriba: 20px}
.demo2 {border: 1px sólido #9bdf70; color de fondo: #f0fbeb; izquierda: 450px; superior: 20px}
.demo3 {border: 1px sólido #bbe1f1; fondo de fondo: #eefaff; izquierda: 750px; arriba: 20px}
.demo4 {border: 1px sólido #96c2f1; #eefaff; izquierda: 150px; arriba: 220px}
.demo5 {borde: 1px sólido #ffcc00; color de fondo: #fffff7; izquierda: 450px; arriba: 220px}
.DemO6 {borde: 1px sólido #E3E197; Color de fondo: #ffffdd; izquierda: 750px; superior: 220px}
.Demo7 {borde: 1px sólido #adcd3c; background-color: #f2fddb; izquierda: 150px; superior: 420px}
.Demo8 {Border: 1px Solid #F8B3D0; Color de fondo: #FFF5FA; Izquierda: 450px; Top: 420px}
.demo9 {borde: 1px sólido #d3d3d3; fondo de fondo: #f7f7f7; izquierda: 750px; superior: 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">
(función (ventana, indefinida) {
window.sys = function (ua) {
var b = {
es decir: /msie/.test(ua) &&! /persa/.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 en b) {
if (b [i]) {vmark = "safari" == i? "Versión": I; romper; }
}
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;
regreso B;
} (Window.Navigator.Useragent.tOlowerCase ());
window.sys.ie6 && document.execCommand ("BackgroundImageCache", falso, true);
ventana. $ = function (id) {
return 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, falso): element.attachevent ("on" + e, fn);
};
Window.addListener.guid = 1;
window.removelistener = function (element, e, fn) {
Var manejadores = element.events [e], type;
if (fn) {
para (escriba los manejadores)
if (Handlers [type] === fn) {
element.removeEventListener? Element.RemoveEventListener (e, fn, falso): element.detachevent ("on" + e, fn);
eliminar manejadores [tipo];
}
}demás{
para (escriba manejadores) {
element.removeEventListener? Element.RemoveEventListener (e, Handlers [type], false): element.detachevent ("on" + e, manejadores [type]);
eliminar manejadores [tipo];
}
}
};
Window.setStyle = function (e, o) {
if (typeof o == "cadena")
e.style.csstext = o;
demás
para (var i in o)
e.style [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = function (objeto, diversión) {
var args = slice.call (argumentos) .slice (2);
Función de retorno () {
return fun.apply (objeto, args);
};
};
window.bindaseVentListener = function (objeto, diversión, args) {
var args = slice.call (argumentos) .slice (2);
función de retorno (evento) {
return fun.apply (objeto, [evento || window.event] .concat (args));
}
};
// Copiar desde JQ
window.extend = function () {
var objetivo = argumentos [0] || {}, i = 1, longitud = argumentos.length, profundo = true, opciones;
if (typeof Target === "Boolean") {
profundo = objetivo;
objetivo = argumentos [1] || {};
i = 2;
}
if (typeof Target! == "Object" && object.prototype.tostring.call (target)! = "[función de objeto]")
objetivo = {};
para (; i <longitud; i ++) {
if ((opciones = argumentos [i])! = nulo)
para (nombre var en opciones) {
var src = target [name], copy = options [name];
if (Target === Copy)
continuar;
if (profundo && copy && typeof Copy === "Object" &&! Copy.nodeType) {
Target [name] = arguments.callee (profundo, src || (copy.length! = null? []: {}), copiar);
}
más if (copia! == Undefined)
objetivo [nombre] = copia;
}
}
objetivo de retorno;
};
// Copiar desde JQ
window.each = function (objeto, devolución de llamada, args) {
nombre var, i = 0, longitud = objeto.length;
if (args) {
args = array.prototype.slice.call (argumentos) .slice (2);
if (longitud === indefinido) {
para (nombre en el objeto)
if (callback.apply (objeto [nombre], [nombre, objeto [nombre]]. Concat (args)) === Falso)
romper;
} demás
para (; i <longitud; i ++)
if (callback.apply (objeto [i], [i, objeto [i]]. concat (args)) === falso) //
romper;
} demás {
if (longitud === indefinido) {
para (nombre en el objeto)
if (callback.call (objeto [nombre], nombre, objeto [nombre]) === falso)
romper;
} demás
for (valor var = objeto [0];
i <longitud && callback.call (valor, i, valor)! == falso; valor = objeto [++ i]) {}
}
Objeto de retorno;
};
Window.CurrentStyle = function (elemento) {
Elemento de retorno. CurrentStyle || document.defaultView.getComputedStyle (elemento, nulo);
};
window.objpos = function (elem) {
var izquierda = 0, top = 0, derecha = 0, fondo = 0, doc = elem? Elem.OwnerDocument: documento;
if (! Elem.getBoundingClientRect || window.sys.ie8) {
var n = elem;
while (n) {izquierda += n.offsetleft, top += n.offsettop; n = N.OffSetParent; };
derecho = izquierda + elem.offsetWidth; Bottom = Top + Elem.Offsetheight;
} demás {
var rect = elem.getBoundingClientRect ();
izquierda = derecha = doc.documentelement.scrollleft || doc.body.scrollleft;
top = fondo = doc.documentelement.scrollleft || doc.body.scrollleft;
izquierda += rect.left; derecho += rect.right;
top += rect.top; Bottom += rect.bottom;
}
return {"izquierda": izquierda, "superior": superior, "derecha": derecha, "fondo": fondo};
};
window.hasclass = function (elemento, classname) {
return element.classname.match (new Regexp ('(// s |^)'+classname+'(// s | $)');
};
window.addclass = function (elemento, classname) {
! window.hasclass (elemento, classname) && (element.classname += "" +classname);
};
window.removeclass = function (elemento, classname) {
Window.hasclass (elemento, classname) && (element.classname = element.classname.replace (new Regexp ('(// s |^)'+classname+'(// s | $)'), ''));
}
})(ventana);
var drag = {
Elem: NULL,
Zindex: 0,
Opciones: {},
init: function () {
cada uno (argumentos, función (i, elem, othis) {
AddListener (Elem, 'Mousedown', BindaseVentListener (Othis, Othis.Star, Elem));
},este);
},
Inicio: función (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);
},
mover: función (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);
},
arriba: function () {
removelistener (documento, 'mouseMove');
removelistener (documento, 'mouseup');
Sys.ie && this.elem.ReleaseCapture ();
this.options.callbackup && this.options.callbackup (this.elem);
}
};
var superlap = {
Hostel: {}, // 所有需要计算重合的元素
OverlaPList: {}, // 已经重合的元素
init: function (elems) {
cada uno (elems, function (i, elem, othis) {
Elem.SetAttribute ('superpuesto', 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}, right bottomdot: {x: r, y: b}};
},este);
},
setElem: function (elem) {
if (! Elem) regreso;
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}, derecha: {x: r, y: b}};
},
// 判断是否重合
isoverlap: function (my) {
var obj = {}, my = this.hostel [my.getAttribute ('overlap')];
cada uno (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.righttopDot.x)
devolver;
obj [config.elem.getAttribute ('Overlap')] = [config.elem, othis.howoverlap (my, config)];
},este);
regresar obj;
},
// 判断重合面积
HowoverLap: function (my, otro) {
var l = otro.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 [clave [0]]. x, y1 = my [clave [0]. Y, x2 = OTRO [clave [1]]. X, y2 = OTRO [KEY [1]]. Y;
return math.abs ((x1-x2)*(y1-y2));
};
// 完全重合
if (arr.length === 4) {
regreso 162*162;
};
},
// 看点是不是在另一个 div 中
incluir: 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 () {
extender (drag.options, {callbackmove: moverse, callbackup: up});
Funcionar up (elem) {
para (var n en superlap.overlaPlist)
RemoveClass (Overlap.OverlaPList [n] [0], 'Focus')
Overlap.overLapList = {};
Drag.elem.innerhtml = drag.elem.id;
};
Función Move (Elem) {
superplap.setelem (elem);
// p 为判断返回的 obj 是不是空的
var obj = Overlap.SloverLap (Elem), nombre, p = función (o) {
para (nombre en o)
devolver falso;
devolver verdadero;
} (obj);
// 如果是个空对象 则返回 不进行下面的遍历
if (p) {
arriba();
devolver;
};
var str = '';
Overlap.overLapList = obj;
Cada (Overlap.hostel, function (Key, config) {
if (obj [key]) {
addClass (obj [clave] [0], 'enfoque');
str = str+'与'+obj [key] [0] .id+'重合的面积为:'+obj [key] [1]+'</br>';
}demás{
removeClass (config.elem, 'foco');
}
});
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>
代码如上 ， 只是感觉效率有点低 ， 小伙伴们有没有什么优化方案呢 还请告之 不胜感激 不胜感激