复制代码代码如下:
<! 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>
<стиль типа = "text/css">
тело {маржа: 0px; Заполнение: 0px; размер шрифта: 12px}
.div {высота: 160px; ширина: 160px; положение: абсолют; Текст-альбом: Центр; }
.demo1 {border: 1px solid #96c2f1; фоновый цвет: #eff7ff; слева: 150px; top: 20px}
.demo2 {border: 1px solid #9bdf70; фоновый цвет: #f0fbeb; слева: 450px; top: 20px}
.demo3 {border: 1px solid #bbe1f1; фоновый цвет: #eefaff; слева: 750px; top: 20px}
.demo4 {border: 1px solid #96c2f1; фоновый цвет: #eefaff; слева: 150px; top: 220px}
.demo5 {border: 1px solid #ffcc00; фоновый цвет: #fffff7; слева: 450px; top: 220px}
.demo6 {border: 1px solid #e3e197; фоновый цвет: #ffffdd; слева: 750px; top: 220px}
.demo7 {border: 1px solid #adcd3c; фоновый цвет: #f2fddb; слева: 150px; top: 420px}
.demo8 {border: 1px solid #f8b3d0; фоновый цвет: #fff5fa; слева: 450px; top: 420px}
.demo9 {border: 1px solid #d3d3d3; фоновый цвет: #f7f7f7; слева: 750px; top: 420px}
.focus {фоновый цвет: #990000;}
</style>
<тело>
<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 = {
т.е. /msie/.test(ua) &&! /pera/.test (ua),
Opera: /opera/.test(ua),
Safari: /webkit/.test(ua) &&! /chrome/.test (ua),
Firefox: /firefox/.test(ua),
Chrome: /chrome/.test(ua)
}, vmark = "";
для (var i in b) {
if (b [i]) {vmark = "safari" == 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 ("founalImageCache", false, true);
window. $ = 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 Handlers = element.Events [e], тип;
if (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 in o)
e.style [i] = o [i];
};
var slice = array.prototype.slice;
window.bind = function (Object, Fun) {
var args = slice.call (аргументы) .slice (2);
return function () {
вернуть fun.apply (объект, args);
};
};
window.bindaseventlistener = function (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") {
Deep = Target;
Target = аргументы [1] || {};
i = 2;
}
if (typeof target! == "Object" && object.prototype.tostring.call (target)! = "
target = {};
for (; i <length; i ++) {
if ((options = аргументы [i])! = null)
для (имя var в параметрах) {
var src = target [name], copy = options [name];
if (target === Copy)
продолжать;
if (deep && copy && typeof copy === "object" &&! copy.nodetype) {
target [name] = arguments.callee (deep, src || (copy.length! = null? []: {}), copy);
}
иначе if (копия! == не определен)
Target [name] = copy;
}
}
вернуть цель;
};
// копирование из JQ
window.each = function (объект, обратный вызов, args) {
var name, i = 0, length = object.length;
if (args) {
args = array.prototype.slice.call (аргументы) .slice (2);
if (длина === не определен) {
для (имя в объекте)
if (callback.apply (object [name], [name, object [name]]. concat (args)) === false)
перерыв;
} еще
для (; i <длина; i ++)
if (callback.apply (object [i], [i, object [i]]. concat (args)) === false) //
перерыв;
} еще {
if (длина === не определен) {
для (имя в объекте)
if (callback.call (object [name], name, object [name]) === false)
перерыв;
} еще
for (var value = object [0];
i <length && callback.call (value, i, value)! == false; value = object [++ i]) {}
}
вернуть объект;
};
window.currentStyle = function (element) {
return element.currentStyle || document.defaultview.getComputedStyle (element, null);
};
window.objpos = function (elem) {
var left = 0, top = 0, справа = 0, внизу = 0, doc = elem? elem.ownerDocument: документ;
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 ();
влево = правое = doc.documentelement.scrollleft || doc.body.scrollleft;
top = внизу = doc.documentelement.scrollleft || doc.body.scrollleft;
слева += rect.left; справа += rect.right;
top += rect.top; внизу += rect.bottom;
}
return {"left": слева, "top": top, "справа": справа, "внизу": внизу};
};
window.hasclass = function (element, classname) {
return element.classname.match (new Regexp ('(// s |^)'+classname+'(// s | $)'));
};
window.addclass = function (element, classname) {
! window.hasclass (element, classname) && (element.classname += "" +classname);
};
window.removeclass = function (element, classname) {
window.hasclass (element, classname) && (element.classname = element.classname.replace (new regexp ('(// s |^)'+classname+'(// s | $)'), ''));
}
})(окно);
var drag = {
elem: null,
Zindex: 0,
параметры : {},
init: function () {
Каждый (аргументы, функция (i, elem, othis) {
addlistener (elem, 'mousedown', bindaseventlistener (othis, othis.start, elem));
},этот);
},
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 (документ, "MouseMove", BindaseVentListener (this, this.move));
AddListener (документ, "MouseUp", Bind (this, this.up));
this.options.callbackmove && this.options.callbackmove (this.elem);
},
Переместить: 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 = ilft - 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 pallap = {
Хостел: {}, // 所有需要计算重合的元素
SpellapList: {}, // 已经重合的元素
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}, левая боттомдот: {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 ('ploverp')] = {elem: elem, lefttopdot: {x: l, y: t}, Leadsbottomdot: {x: l, y: b}, righttopdot: {x: r, y: t}, rightbottomdot: {x: r, y: b}};
},
// 判断是否重合
isoverlap: function (my) {
var obj = {}, my = this.hostel [my.getAttribute ('ploverp')];
Каждый (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> = configtopdot.x)
возвращаться;
obj [config.elem.getAttribute ('ploverp')] = [config.elem, othis.howoverlap (my, config)];
},этот);
вернуть OBJ;
},
// 判断重合面积
WhowOverlap: function (my, dise) {
var l = oreth.leftbottomdot.x, r = ore.righttopdot.x, t = oreth.lefttopdot.y, b = oreth.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 [key [0]]. y, x2 = Другое [ключ [1]]. x, y2 = Другое [ключ [1]]. y;
return math.abs ((x1-x2)*(y1-y2));
};
// 完全重合
if (arr.length === 4) {
возврат 162*162;
};
},
// 看点是不是在另一个 div 中
Включите: 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 () {
extend (Drag.options, {callbackmove: move, callbackup: up});
функционировать (elem) {
для (var n in overp.overlaplist)
removeClass (plowap.Overlaplist [n] [0], 'Focus')
Overlap.Overlaplist = {};
Drag.elem.innerhtml = drag.elem.id;
};
Функция перемещения (elem) {
Overtap.Setelem (elem);
// p 为判断返回的 obj 是不是空的
var obj = overp.soverlap (elem), name, p = function (o) {
для (имя в о)
вернуть ложь;
вернуть истину;
} (obj);
// 如果是个空对象 则返回 不进行下面的遍历
if (p) {
вверх();
возвращаться;
};
var str = '';
Overlap.Overlaplist = obj;
Каждый (overp.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'));
overp.init ([$ ('demo1'), $ ('demo2'), $ ('demo3'), $ ('demo4'), $ ('demo5'), $ ('demo6'), $ ('demo7'), $ ('demo8'), $ ('demo9')]);
};
</script>
</body>
</html>
代码如上 ， 只是感觉效率有点低 小伙伴们有没有什么优化方案呢 ， 还请告之 ， 不胜感激