复制代码代码如下:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten-tipe" content = "text /html; charset = gb2312" />
<title> tabel </iteme>
</head>
<type style = "text/css">
tubuh {margin: 0px; padding: 0px; Ukuran font: 12px}
.div {Height: 160px; lebar: 160px; posisi: absolute; Teks-Align: tengah; }
.demo1 {border: 1px solid #96c2f1; latar belakang-warna: #eff7ff; kiri: 150px; atas: 20px}
.demo2 {border: 1px solid #9bdf70; latar belakang-warna: #f0fbeb; kiri: 450px; atas: 20px}
.demo3 {border: 1px solid #bbe1f1; latar belakang-warna: #eefaff; kiri: 750px; atas: 20px}
.demo4 {border: 1px solid #96c2f1; latar belakang-warna: #eefaff; kiri: 150px; atas: 220px}
.demo5 {border: 1px solid #ffcc00; latar belakang-warna: #fffff7; kiri: 450px; atas: 220px}
.demo6 {border: 1px solid #e3e197; latar belakang-warna: #ffffdd; kiri: 750px; atas: 220px}
.demo7 {border: 1px solid #adcd3c; latar belakang-warna: #f2fddb; kiri: 150px; atas: 420px}
.demo8 {border: 1px solid #f8b3d0; latar belakang-warna: #fff5fa; kiri: 450px; atas: 420px}
.demo9 {border: 1px solid #d3d3d3; latar belakang-warna: #f7f7f7; kiri: 750px; atas: 420px}
.focus {latar belakang-warna: #990000;}
</tyle>
<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>
<bahasa skrip = "javascript">
(fungsi (jendela, tidak terdefinisi) {
window.sys = function (ua) {
var b = {
yaitu: /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 = "";
untuk (var i in b) {
if (b [i]) {vmark = "safari" == i? "Versi": i; merusak; }
}
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;
kembali b;
} (window.navigator.useragent.tolowercase ());
window.sys.ie6 && document.execCommand ("latar belakangImagecache", false, true);
jendela. $ = function (id) {
return document.getElementById (id);
};
window.addlistener = function (elemen, 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 (elemen, e, fn) {
var handlers = element.events [e], type;
if (fn) {
untuk (ketik penangan)
if (handlers [type] === fn) {
element.removeeventlistener? element.removeeventlistener (e, fn, false): element.detachevent ("on" + e, fn);
Hapus penangan [tipe];
}
}kalau tidak{
untuk (ketik penangan) {
element.removeeventlistener? element.removeeventlistener (e, penangan [type], false): element.detachevent ("on" + e, penangan [type]);
Hapus penangan [tipe];
}
}
};
window.setstyle = function (e, o) {
if (typeof o == "string")
e.style.csstext = o;
kalau tidak
untuk (var i di o)
E.Style [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = function (objek, menyenangkan) {
var args = slice.call (argumen) .slice (2);
return function () {
return fun.apply (objek, args);
};
};
window.bindaseventListener = function (objek, fun, args) {
var args = slice.call (argumen) .slice (2);
return function (event) {
return fun.apply (objek, [event || window.event] .concat (args));
}
};
// Salin dari JQ
window.extend = function () {
var target = argumen [0] || {}, i = 1, panjang = argumen.length, deep = true, opsi;
if (typeOf target === "boolean") {
Deep = Target;
target = argumen [1] || {};
i = 2;
}
if (typeOf target! == "objek" && object.prototype.toString.call (target)! = "[fungsi objek]")
target = {};
untuk (; i <panjang; i ++) {
if ((options = argumen [i])! = null)
untuk (nama var di opsi) {
var src = target [name], copy = options [name];
if (target === salin)
melanjutkan;
if (deep && copy && typeof copy === "objek" &&! copy.nodetype) {
target [name] = arguments.callee (Deep, src || (copy.length! = null? []: {}), copy);
}
lain jika (salin! == tidak ditentukan)
target [name] = copy;
}
}
target pengembalian;
};
// Salin dari JQ
window.each = function (objek, callback, args) {
nama var, i = 0, panjang = objek.length;
if (args) {
args = array.prototype.slice.call (argumen) .slice (2);
if (length === tidak terdefinisi) {
untuk (nama dalam objek)
if (callback.apply (objek [name], [name, objek [name]]. concat (args)) === false)
merusak;
} kalau tidak
untuk (; i <panjang; i ++)
if (callback.apply (objek [i], [i, objek [i]]. concat (args)) === false) //
merusak;
} kalau tidak {
if (length === tidak terdefinisi) {
untuk (nama dalam objek)
if (callback.call (objek [nama], name, objek [nama]) === false)
merusak;
} kalau tidak
untuk (var value = objek [0];
i <length && callback.call (value, i, value)! == false; value = objek [++ i]) {}
}
objek pengembalian;
};
window.currentstyle = function (elemen) {
return element.currentstyle || document.defaultview.getComputedStyle (elemen, null);
};
window.objpos = function (elem) {
var kiri = 0, atas = 0, kanan = 0, bawah = 0, doc = elem? elem.OwnerDocument: dokumen;
if (! elem.getBoundingClientRect || window.sys.ie8) {
var n = elem;
while (n) {left += n.offsetleft, top += n.offsettop; n = n.offsetParent; };
kanan = kiri + elem.offsetWidth; Bottom = Top + Elem.OffsetHeight;
} kalau tidak {
var rect = elem.getBoundingClientRect ();
kiri = kanan = doc.documentelement.scrollleft || doc.body.scrollleft;
TOP = BOTTOM = DOC.DocumentElement.Scrollleft || doc.body.scrollleft;
Kiri += Rect.Left; kanan += rect.right;
top += rect.top; Bawah += rect.bottom;
}
return {"kiri": kiri, "atas": atas, "kanan": kanan, "bawah": bawah};
};
window.hasclass = function (elemen, classname) {
return element.classname.match (regexp baru ('(// s |^)'+classname+'(// s | $)'));
};
window.addclass = function (elemen, classname) {
window.hasclass (elemen, classname) && (element.classname += "" +className);
};
window.removeclass = function (elemen, classname) {
window.hasclass (element, classname) && (element.classname = element.classname.replace (regexp baru ('(// s |^)'+classname+'(// s | $)'), ''));
}
})(jendela);
var drag = {
Elem: Null,
Zindex: 0,
Opsi: {},
init: function () {
masing -masing (argumen, fungsi (i, elem, othis) {
addlistener (elem, 'mousedown', bindaseventlistener (othis, othis.start, elem));
},ini);
},
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 (dokumen, "mousemove", bindaseventlistener (this, this.move));
addListener (dokumen, "mouseup", bind (this, this.up));
this.options.callbackMove && this.options.callbackMove (this.elem);
},
pindahkan: 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 (dokumen, 'mousemove');
Removelistener (dokumen, 'mouseUp');
Sys.ie && this.elem.releasecapture ();
this.options.callbackup && this.options.callbackup (this.elem);
}
};
var overlap = {
Hostel: {}, // 所有需要计算重合的元素
OverlapList: {}, // 已经重合的元素
init: function (elem) {
masing -masing (elem, function (i, elem, othis) {
elem.setAttribute ('tumpang tindih', 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}};
},ini);
},
setelem: function (elem) {
if (! elem) kembali;
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')];
masing -masing (this.hostel, function (kunci, 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> =rightttopdot.x || my.lefttopdot.x> =rightttopdot.x || my.lefttopdot.x> =rightttopdot
kembali;
obj [config.elem.getAttribute ('overlap')] = [config.elem, othis.howoverlap (my, config)];
},ini);
kembalikan obj;
},
// 判断重合面积
howoverlap: function (my, corde) {
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 = saya [tombol [0]]. x, y1 = saya [tombol [0]].
return math.abs ((x1-x2)*(y1-y2));
};
// 完全重合
if (arr.length === 4) {
kembali 162*162;
};
},
// 看点是不是在另一个 Div 中
termasuk: fungsi (dot, l, r, t, b, kunci) {
return (dot.x> = l && dot.x <= r && dot.y> = t && dot.y <= b)? Key: false;
}
};
window.onload = function () {
extanding (drag.options, {callbackMove: move, callbackup: up});
function up (elem) {
untuk (var n di overlap.overlaplist)
RemoveClass (Overlap.overlaplist [n] [0], 'Focus')
overlap.overLapList = {};
Drag.elem.innerhtml = drag.elem.id;
};
function move (elem) {
Overlap.setelem (elem);
// p 为判断返回的 obj 是不是空的
var obj = overlap.isOverlap (elem), name, p = function (o) {
untuk (nama dalam o)
mengembalikan false;
Kembali Benar;
} (obj);
// 如果是个空对象 则返回 不进行下面的遍历
if (p) {
ke atas();
kembali;
};
var str = '';
tumpang tindih.overlaplist = obj;
masing -masing (overlap.hostel, function (tombol, config) {
if (obj [key]) {
addClass (obj [key] [0], 'fokus');
str = str+'与'+obj [key] [0] .id+'重合的面积为:'+obj [key] [1]+'</br>';
}kalau tidak{
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>
代码如上 ， 只是感觉效率有点低 ， 小伙伴们有没有什么优化方案呢 ， 还请告之 ， 不胜感激