复制代码代码如下:
<! 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">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" />
<title> ตาราง </title>
</head>
<style type = "text/css">
ร่างกาย {มาร์จิ้น: 0px; Padding: 0px; ขนาดตัวอักษร: 12px}
.div {ความสูง: 160px; ความกว้าง: 160px; ตำแหน่ง: สัมบูรณ์; TEXT-ALIGN: CENTER; -
.DEMO1 {เส้นขอบ: 1PX SOLID #96C2F1; พื้นหลังสี: #EFF7FF; ซ้าย: 150PX; TOP: 20PX}
.DEMO2 {ชายแดน: 1PX SOLID #9BDF70; พื้นหลังสี: #F0FBEB; ซ้าย: 450PX; TOP: 20PX}
.DEMO3 {ชายแดน: 1PX SOLID #BBE1F1; พื้นหลังสี: #EEFAFF; ซ้าย: 750PX; TOP: 20PX}
.DEMO4 {ชายแดน: 1PX SOLID #96C2F1; พื้นหลังสี: #EEFAFF; ซ้าย: 150PX; TOP: 220PX}
.DEMO5 {ชายแดน: 1px Solid #FFCC00; พื้นหลังสี: #fffff7; ซ้าย: 450px; Top: 220px}
.DEMO6 {ชายแดน: 1PX SOLID #E3E197; พื้นหลังสี: #FFFFDD; ซ้าย: 750PX; TOP: 220PX}
.DEMO7 {ชายแดน: 1PX SOLID #ADCD3C; พื้นหลังสี: #F2FDDB; ซ้าย: 150PX; TOP: 420PX}
.DEMO8 {ชายแดน: 1PX SOLID #F8B3D0; พื้นหลังสี: #FFF5FA; ซ้าย: 450PX; TOP: 420PX}
.DEMO9 {ชายแดน: 1PX SOLID #D3D3D3; พื้นหลังสี: #F7F7F7; ซ้าย: 750PX; TOP: 420PX}
.focus {พื้นหลังสี: #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>
<ภาษาสคริปต์ = "JavaScript">
(ฟังก์ชั่น (หน้าต่างที่ไม่ได้กำหนด) {
window.sys = function (ua) {
var b = {
เช่น: /msie/.test(ua) &&! /opera/.test (ua)
โอเปร่า: /opera/.test(ua),
Safari: /webkit/.test(ua) &&! /chrome/.test (ua)
Firefox: /firefox/.test(ua)
Chrome: /chrome/.test(ua)
}, vmark = "";
สำหรับ (var i ใน b) {
ถ้า (b [i]) {vmark = "safari" == i? "เวอร์ชัน": i; หยุดพัก; -
-
b.version = vmark && regexp ("(?:" + vmark + ") [///:] ([// d.] +)"). ทดสอบ (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;
กลับ B;
} (window.navigator.useragent.toLowerCase ());
window.sys.ie6 && document.execcommand ("backgroundimagecache", เท็จ, จริง);
หน้าต่าง. $ = function (id) {
ส่งคืน document.getElementById (id);
-
window.addListener = ฟังก์ชั่น (องค์ประกอบ, 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 (องค์ประกอบ, e, fn) {
ตัวจัดการ var = element.events [e], ประเภท;
ถ้า (fn) {
สำหรับ (พิมพ์ในตัวจัดการ)
if (handlers [type] === fn) {
Element.RemoveEventListener? Element.RemoveEventListener (E, FN, FALSE): Element.detacheVent ("ON" + E, FN);
ลบตัวจัดการ [ประเภท];
-
}อื่น{
สำหรับ (พิมพ์ในตัวจัดการ) {
Element.RemoveEventListener? Element.RemoveEventListener (E, Handlers [type], FALSE): Element.DetacheVent ("ON" + E, Handlers [Type]);
ลบตัวจัดการ [ประเภท];
-
-
-
window.setStyle = function (e, o) {
if (typeof o == "String")
E.STYLE.CSSTEXT = O;
อื่น
สำหรับ (var i ใน o)
E. Style [i] = o [i];
-
var slice = array.prototype.slice;
window.bind = ฟังก์ชั่น (วัตถุ, สนุก) {
var args = slice.call (อาร์กิวเมนต์) .slice (2);
return function () {
คืนความสนุก (วัตถุ, args);
-
-
window.bindaseventListener = function (วัตถุ, fun, args) {
var args = slice.call (อาร์กิวเมนต์) .slice (2);
ฟังก์ชั่นส่งคืน (เหตุการณ์) {
return fun.apply (วัตถุ, [event || window.event] .concat (args));
-
-
// คัดลอกจาก jq
window.extend = function () {
var target = อาร์กิวเมนต์ [0] || {}, i = 1, length = arguments.length, deep = true, ตัวเลือก;
if (typeof target === "boolean") {
ลึก = เป้าหมาย;
target = อาร์กิวเมนต์ [1] || -
i = 2;
-
if (typeof target! == "Object" && Object.prototype.toString.call (เป้าหมาย)! = "[ฟังก์ชันวัตถุ]")
target = {};
สำหรับ (; i <length; i ++) {
if ((ตัวเลือก = อาร์กิวเมนต์ [i])! = null)
สำหรับ (ชื่อ var ในตัวเลือก) {
var src = เป้าหมาย [ชื่อ], copy = ตัวเลือก [ชื่อ];
if (target === สำเนา)
ดำเนินการต่อ;
if (deep && copy && typeof copy === "Object" &&! copy.nodeType) {
เป้าหมาย [ชื่อ] = arguments.callee (ลึก, src || (copy.length! = null? []: {}), คัดลอก);
-
อื่นถ้า (คัดลอก! == ไม่ได้กำหนด)
เป้าหมาย [ชื่อ] = คัดลอก;
-
-
เป้าหมายกลับ;
-
// คัดลอกจาก jq
window.each = function (วัตถุ, callback, args) {
ชื่อ var, i = 0, length = object.length;
ถ้า (args) {
args = array.prototype.slice.call (อาร์กิวเมนต์) .slice (2);
ถ้า (ความยาว === ไม่ได้กำหนด) {
สำหรับ (ชื่อในวัตถุ)
if (callback.apply (วัตถุ [ชื่อ], [ชื่อ, วัตถุ [ชื่อ]]. concat (args)) === false)
หยุดพัก;
} อื่น
สำหรับ (; i <length; i ++)
ถ้า (callback.apply (object [i], [i, object [i]]. concat (args)) === false) //
หยุดพัก;
} อื่น {
ถ้า (ความยาว === ไม่ได้กำหนด) {
สำหรับ (ชื่อในวัตถุ)
if (callback.call (วัตถุ [ชื่อ], ชื่อ, วัตถุ [ชื่อ]) === เท็จ)
หยุดพัก;
} อื่น
สำหรับ (var value = object [0];
i <length && callback.call (value, i, value)! == false; value = object [++ i]) {}
-
วัตถุกลับ;
-
window.currentstyle = ฟังก์ชั่น (องค์ประกอบ) {
return element.currentstyle || document.defaultView.getComputedStyle (องค์ประกอบ, null);
-
window.objpos = function (elem) {
var left = 0, top = 0, ขวา = 0, bottom = 0, doc = elem? elem.ownerDocument: เอกสาร;
if (! elem.getBoundingClientRect || window.sys.ie8) {
var n = elem;
ในขณะที่ (n) {ซ้าย += n.offsetleft, top += n.offsettop; n = n.offsetParent; -
ขวา = ซ้าย + elem.offsetWidth; ด้านล่าง = top + elem.offSetheight;
} อื่น {
var rect = elem.getBoundingClientRect ();
ซ้าย = ขวา = doc.documentelement.scrollleft || doc.body.scrollleft;
top = bottom = doc.documentelement.scrollleft || doc.body.scrollleft;
ซ้าย += rect.left; ขวา += rect.right;
top += rect.top; ด้านล่าง += rect.bottom;
-
return {"left": left, "top": top, "ขวา": ขวา, "Bottom": Bottom};
-
window.hasclass = function (element, className) {
return element.classname.match (ใหม่ regexp ('(// s |^)'+classname+'(// s | $)'));
-
window.addclass = function (element, className) {
! window.hasclass (Element, className) && (element.className += "" +className);
-
window.removeClass = function (element, className) {
window.hasclass (องค์ประกอบ, classname) && (element.className = element.className.replace (ใหม่ regexp ('(// s |^)'+className+'(// s | $)'), ''));
-
})(หน้าต่าง);
var drag = {
Elem: Null,
Zindex: 0,
ตัวเลือก: {},
init: function () {
แต่ละ (อาร์กิวเมนต์, ฟังก์ชั่น (i, elem, othis) {
AddListener (Elem, 'Mousedown', BindaseventListener (Othis, Othis.start, Elem));
},นี้);
-
เริ่มต้น: ฟังก์ชั่น (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 (เอกสาร, "Mousemove", bindaseventListener (นี่, this.move));
addListener (เอกสาร, "mouseup", bind (this, this.up));
this.options.callbackmove && this.options.callbackmove (this.elem);
-
ย้าย: ฟังก์ชั่น (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 (เอกสาร, 'Mousemove');
RemoveListener (เอกสาร, 'Mouseup');
sys.ie && this.elem.releasecapture ();
this.options.callbackup && this.options.callbackup (this.elem);
-
-
var ทับซ้อน = {
โฮสเทล: {}, // 所有需要计算重合的元素
OverlAplist: {}, // 已经重合的元素
init: function (elems) {
แต่ละ (elems, function (i, elem, othis) {
elem.setAttribute ('ทับซ้อน', 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}, ขวา
},นี้);
-
setelem: ฟังก์ชั่น (elem) {
ถ้า (! elem) กลับมา;
var ret = objpos (elem), l = ret.left, t = ret.top, b = ret.bottom, r = ret.right;
this.hostel [elem.getAttribute ('ทับซ้อน')] = {elem: elem, lefttopdot: {x: l, y: t}, leftbottomdot: {x: l, y: b}, righttopdot: {x: r, y: t}
-
// 判断是否重合
isoverlap: ฟังก์ชั่น (ของฉัน) {
var obj = {}, my = this.hostel [my.getAttribute ('ทับซ้อน')];
แต่ละ (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 | |
กลับ;
obj [config.elem.getattribute ('ทับซ้อน')] = [config.elem, othis.howoverlap (my, config)];
},นี้);
คืน OBJ;
-
// 判断重合面积
Howoverlap: ฟังก์ชั่น (ของฉัน, อื่น ๆ ) {
var l = อื่น ๆ leftbottomdot.x, r = อื่น ๆ
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);
ถ้า (! arr [0]) กลับ 0;
// 一个点或者是 2 个点都在其中个点都在其中
if (arr.length === 1 || arr.length === 2) {
var key = arr [0] .split ('-'), x1 = ของฉัน [คีย์ [0]]. x, y1 = ของฉัน [คีย์ [0]]. y, x2 = อื่น ๆ [คีย์ [1]]. x, y2 = อื่น ๆ [คีย์ [1]]. y;
return math.abs ((x1-x2)*(y1-y2));
-
// 完全重合
if (arr.length === 4) {
กลับ 162*162;
-
-
// 看点是不是在另一个 div 中
รวม: ฟังก์ชั่น (dot, l, r, t, b, key) {
return (dot.x> = l && dot.x <= r && dot.y> = t && dot.y <= b)? key: false;
-
-
window.onload = function () {
ขยาย (drag.options, {callbackmove: ย้าย, callbackup: up});
ฟังก์ชั่นขึ้น (elem) {
สำหรับ (var n ในการทับซ้อน OverlPlist)
RemoveClass (Overlap.overlPlist [n] [0], 'Focus')
Overlap.overLplist = {};
drag.elem.innerhtml = drag.elem.id;
-
ฟังก์ชั่นย้าย (elem) {
ทับซ้อน. SetElem (Elem);
// p 为判断返回的 obj 是不是空的
var obj = ทับซ้อน. isoverlap (elem), ชื่อ, p = function (o) {
สำหรับ (ชื่อใน o)
กลับเท็จ;
กลับมาจริง;
} (obj);
// 如果是个空对象则返回不进行下面的遍历
ถ้า (p) {
ขึ้น();
กลับ;
-
var str = '';
ทับซ้อน overlaplist = obj;
แต่ละ (ทับซ้อน. hostel, ฟังก์ชั่น (คีย์, config) {
ถ้า (obj [key]) {
AddClass (obj [key] [0], 'focus');
str = str+'与'+obj [key] [0] .id+'重合的面积为:'+obj [key] [1]+'</br>';
}อื่น{
RemoveClass (config.elem, 'focus');
-
-
drag.elem.innerhtml = str;
-
drag.init ($ ('demo1'), $ ('demo2'), $ ('demo3'), $ ('demo4'), $ ('demo5'), $ ('demo6'), $ ('demo7'), $ ('demo8'), $ ('demo9');
ทับซ้อน. init ([$ ('demo1'), $ ('demo2'), $ ('demo3'), $ ('demo4'), $ ('demo5'), $ ('demo6'), $ ('demo7'), $ (demo8 '), $ (' demo9 '));
-
</script>
</body>
</html>
代码如上， 只是感觉效率有点低， 小伙伴们有没有什么优化方案呢， 还请告之， 不胜感激不胜感激