复制代码代码如下 :
<! 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">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = gb2312" />
<title> 테이블 </title>
</head>
<스타일 유형 = "텍스트/CSS">
바디 {마진 : 0px; 패딩 : 0px; 글꼴 크기 : 12px}
.div {높이 : 160px; 너비 : 160px; 위치 : 절대; 텍스트 정렬 : 센터; }
.DEMO1 {테두리 : 1PX 솔리드 #96C2F1; 배경색 : #eff7ff; 왼쪽 : 150px; 상단 : 20px}
.DEMO2 {테두리 : 1PX 솔리드 #9BDF70; 배경색 : #F0FBEB; 왼쪽 : 450px; 상단 : 20px}
.DEMO3 {테두리 : 1px 솔리드 #bbe1f1; 배경색 : #eefaff; 왼쪽 : 750px; 상단 : 20px}
.DEMO4 {테두리 : 1PX 솔리드 #96C2F1; 배경색 : #eefaff; 왼쪽 : 150px; 상단 : 220px}
.DEMO5 {테두리 : 1PX 솔리드 #ffcc00; 배경색 : #fffff7; 왼쪽 : 450px; 상단 : 220px}
.DEMO6 {테두리 : 1PX 솔리드 #E3E197; 배경색 : #ffffdd; 왼쪽 : 750px; 상단 : 220px}
.DEMO7 {테두리 : 1PX 솔리드 #ADCD3C; 배경색 : #F2FDDB; 왼쪽 : 150px; 상단 : 420px}
.DEMO8 {테두리 : 1PX 솔리드 #F8B3D0; 배경색 : #fff5FA; 왼쪽 : 450px; 상단 : 420px}
.DEMO9 {테두리 : 1PX 솔리드 #d3d3d3; 배경색 : #f7f7f7; 왼쪽 : 750px; 상단 : 420px}
.focus {배경색 : #990000;}
</스타일>
<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">
(함수 (창, 정의되지 않은) {
window.sys = function (ua) {
var b = {
IE : /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 = "";
for (b in b in b) {
if (b [i]) {vmark = "safari"== i? "버전": i; 부서지다; }
}
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;
반환 b;
} (window.navigator.useragent.tolowercase ());
Window.sys.ie6 && document.execcommand ( "backgroundimagecache", false, true);
창. $ = 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, false) : element.attachevent ( "on" + e, fn);
};
window.addlistener.guid = 1;
window.removelistener = function (element, e, fn) {
var 핸들러 = Element.Events [e], 유형;
if (fn) {
for (핸들러 입력)
if (핸들러 [type] === fn) {
요소 .removeEventListener? element.removeEventListener (e, fn, false) : element.detachevent ( "on" + e, fn);
핸들러 삭제 [유형];
}
}또 다른{
for (핸들러 입력) {
요소 .removeEventListener? element.removeEventListener (e, 핸들러 [type], false) : element.detacheVent ( "on" + e, 핸들러 [type]);
핸들러 삭제 [유형];
}
}
};
window.setstyle = function (e, o) {
if (typeof o == "string")
e.style.csstext = O;
또 다른
for (var i in o)
E. 스타일 [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = 함수 (객체, 재미) {
var args = slice.call (인수) .slice (2);
return function () {
return fun.apply (Object, Args);
};
};
Window.bindaseventListener = 함수 (Object, Fun, Args) {
var args = slice.call (인수) .slice (2);
반환 기능 (이벤트) {
return fun.Apply (Object, [event || window.event] .concat (args));
}
};
// JQ에서 복사합니다
window.extend = function () {
var target = 인수 [0] || {}, i = 1, length = arguments.length, deep = true, 옵션;
if (typeof target === "boolean") {
딥 = 대상;
대상 = 인수 [1] || {};
i = 2;
}
if (taptions tarting! == "object"&& 객체 .prototype.tostring.call (target)! = "[객체 함수]")
대상 = {};
for (; i <length; i ++) {
if ((옵션 = 인수 [i])! = null)
for (옵션의 var name) {
var src = target [name], copy = 옵션 [이름];
if (target === Copy)
계속하다;
if (deep && copy && typeof copy === "object"&&! copy.nodetype) {
대상 [name] = arguments.callee (deep, src || (copy.length! = null? [] : {}), copy);
}
else if (copy! == 정의되지 않은)
대상 [이름] = 복사;
}
}
반환 대상;
};
// JQ에서 복사합니다
window.each = 함수 (객체, 콜백, args) {
var name, i = 0, 길이 = 객체 .length;
if (args) {
args = array.prototype.slice.call (arguments) .slice (2);
if (length === 정의되지 않은) {
for (객체의 이름)
if (callback.apply (Object [name], [name, object [name]]. concat (args)) === 거짓)
부서지다;
} 또 다른
for (; i <길이; i ++)
if (callback.apply (Object [i], [i, 객체 [i]]. concat (args)) === 거짓) //
부서지다;
} 또 다른 {
if (length === 정의되지 않은) {
for (객체의 이름)
if (callback.call (개체 [이름], 이름, 개체 [이름]) === 거짓)
부서지다;
} 또 다른
for (var value = Object [0];
i <longth && callback.call (value, i, value)! == false; value = Object [++ i]) {}
}
리턴 객체;
};
window.currentStyle = function (요소) {
반환 요소 .CurrentStyle || document.defaultView.getComputedStyle (요소, null);
};
window.objpos = function (elem) {
var 왼쪽 = 0, 상단 = 0, 오른쪽 = 0, 하단 = 0, doc = elem? elem. annerDocument : 문서;
if (! elem.getBoundingClientRect || window.sys.ie8) {
var n = elem;
while (n) {left += n.offsetleft, top += n.offsettop; n = N.Offsetparent; };
오른쪽 = 왼쪽 + elem.offsetWidth; 하단 = 상단 + elem.offsetheight;
} 또 다른 {
var rect = elem.getBoundingClientRect ();
왼쪽 = right = doc.documentElement.scrollleft || Doc.body.scrollleft;
상단 = 하단 = doc.documentElement.scrollleft || Doc.body.scrollleft;
왼쪽 += rect.left; 오른쪽 += rect.right;
상단 += rect.top; 하단 += rect.bottom;
}
반환 { "왼쪽": 왼쪽, "상단": 상단, "오른쪽": 오른쪽, "하단": 하단};
};
window.hasclass = function (요소, className) {
return emplic.classname.match (새 regexp ( '(// s |^)'+className+'(// s | $)');
};
window.addclass = function (요소, className) {
! wind
};
window.removeClass = function (요소, 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, this.move));
addListener (문서, "마우스 업", 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 (문서, '마우스 업');
sys.ie && this.elem.releasecapture ();
this.options.callbackup && this.options.callbackup (this.elem);
}
};
var 겹침 = {
호스텔 : {}, // 所有需要计算重合的元素
오버리스트 : {}, // 已经重合的元素
init : function (elems) {
각각 (Elems, Function (I, Elem, Othis) {
elem.setAttribute ( 'Overap', i);
var ret = objpos (elem), l = ret.left, t = ret.top, b = ret.bottom, r = ret.right;
Othis.hostel [i] = {elem : elem : elem, lemttopdot : {x : l, y : t}, leftbottomdot : {x : l, y : b}, righttopdot : {x : r, y : t}, RightBottomDot : {x : r, y : b}};
},이것);
},
setelem : function (elem) {
if (! elem) 반환;
var ret = objpos (elem), l = ret.left, t = ret.top, b = ret.bottom, r = ret.right;
this.hostel [elem.getAttribute ( 'outrap')] = {elem : elem, lem, 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 ( 'Overap')];
각각 (this.hostel, function (key, config, othis) {
// 是元素本身 则返回
if (config.elem === my.elem) 반환;
// 判断 2 判断 div 是否重合 如果不重合 则返回 则返回
if (my.leftBottomDot.y <= config.leftTopDot.y || my.leftTopDot.y> = config.leftBottomDot.y || my.rightTopDot.x <= config.leftTopDot.x || my.leftTopDot.x> = convertopdot.x).
반품;
obj [config.elem.getAttribute ( 'outrap')] = [config.elem, othis.howOverlap (my, config)];
},이것);
반환 obj;
},
// 判断重合面积
How -Doverlap : 기능 (내, 기타) {
var l = 기타 .LeftBottomDot.x, r = 기타 .righttopdot.x, t = elover.lefttopdot.y, b = 기타 .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]) 반환 0;
// 一个点 或者是 2 个点都在其中 计算方法是一样的
if (arr.length === 1 || arr.length === 2) {
var key = arr [0] .split ( '-'), x1 = my [key [0]. x, y1 = my [키 [0].
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)? 키 : false;
}
};
Window.onload = function () {
extend (drag.Options, {CallbackMove : move, callbackup : up});
기능 (elem) {
for (overap.overlaplist의 var n)
removeClass (Overap.overlaplist [n] [0], 'Focus')
Overap.overlaplist = {};
drag.elem.innerhtml = drag.elem.id;
};
기능 이동 (elem) {
겹침. 세트 렘 (elem);
// p j obj 是不是空的
var obj = huperap.isoverlap (elem), name, p = function (o) {
for (o in o)
거짓을 반환합니다.
진실을 반환하십시오.
} (obj);
// 如果是个空对象 则返回 如果是个空对象
if (p) {
위로();
반품;
};
var str = '';
Overap.overlaplist = obj;
각각 (Overap.hostel, function (key, config) {
if (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'));
attrapp.init ([$ ( 'demo1'), $ ( 'demo2'), $ ( 'demo3'), $ ( 'demo4'), $ ( 'demo5'), $ ( 'demo6'), $ ( 'demo7'), $ ( 'demo8'), $ ( 'demo9'));
};
</스크립트>
</body>
</html>
代码如上, 只是感觉效率有点低, 小伙伴们有没有什么优化方案呢, 还请告之, 还请告之 不胜感激