复制代码代码如下:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = gb2312" />
<title> جدول </title>
</head>
<type type = "text/css">
الجسم {الهامش: 0px ؛ الحشو: 0px ؛ حجم الخط: 12px}
.div {الارتفاع: 160px ؛ العرض: 160px ؛ الموضع: مطلق ؛ محاذاة النص: المركز ؛ }
.demo1 {الحدود: 1px Solid #96C2F1 ؛ خلفية اللون: #eff7ff ؛ اليسار: 150px ؛ Top: 20px}
.demo2 {الحدود: 1px solid #9bdf70 ؛ خلفية اللون: #f0fbeb ؛ اليسار: 450px ؛ الأعلى: 20px}
.demo3 {الحدود: 1px solid #bbeb1f1 ؛ خلفية اللون: #EEFAFF ؛ اليسار: 750px ؛ الأعلى: 20px}
.demo4 {الحدود: 1px Solid #96C2F1 ؛ خلفية اللون: #EEFAFF ؛ اليسار: 150px ؛ أعلى: 220px}
.demo5 {الحدود: 1px solid #ffcc00 ؛ خلفية اللون: #fffff7 ؛ اليسار: 450px ؛ الأعلى: 220px}
.demo6 {الحدود: 1px Solid #e3e197 ؛ خلفية اللون: #ffffdd ؛ اليسار: 750px ؛ Top: 220px}
.demo7 {الحدود: 1px Solid #ADCD3C ؛ الخلفية اللون: #f2fddb ؛ اليسار: 150px ؛ Top: 420px}
.demo8 {الحدود: 1px solid #f8b3d0 ؛ خلفية اللون: #fff5fa ؛ اليسار: 450px ؛ الأعلى: 420px}
.demo9 {الحدود: 1px Solid #d3d3d3 ؛ خلفية اللون: #f7f7f7 ؛ اليسار: 750px ؛ Top: 420px}
.focus {background-color: #990000 ؛}
</style>
<body>
<div id = 'demo1' class = 'div demo1'> demo1 </viv>
<div id = 'demo2' class = 'div demo2'> demo2 </viv>
<div id = 'demo3' class = 'div demo3'> demo3 </viv>
<div id = 'demo4' class = 'div demo4'> demo4 </viv>
<div id = 'demo5' class = 'div demo5'> demo5 </viv>
<div id = 'demo6' class = 'div demo6'> demo6 </viv>
<div id = 'demo7' class = 'div demo7'> demo7 </viv>
<div id = 'demo8' class = 'div demo8'> demo8 </viv>
<div id = 'demo9' class = 'div demo9'> demo9 </viv>
<script language = "javaScript">
(وظيفة (نافذة ، غير محددة) {
window.sys = function (ua) {
var b = {
ie: /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 = "" ؛
لـ (var i in b) {
if (b [i]) {vmark = "safari" == i؟ "الإصدار": أنا ؛ استراحة؛ }
}
B.Version = Varke && regexp ("(؟:" + varke + ") [///:] ([// 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 ؛
العودة ب ؛
} (window.navigator.useragent.toLowerCase ()) ؛
window.sys.ie6 && document.execcommand ("backgroundImageCache" ، false ، true) ؛
نافذة. $ = دالة (معرف) {
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] ، type ؛
إذا (fn) {
لـ (اكتب معالجات)
if (معالجات [type] === fn) {
element.RemoveEventListener؟ element.RemoveEventListener (E ، FN ، false): element.detachevent ("on" + e ، fn) ؛
حذف معالجات [النوع] ؛
}
}آخر{
لـ (اكتب معالجات) {
element.RemoveEventListener؟ element.RemoveEventListener (E ، معالجات [النوع] ، خطأ): element.detachevent ("on" + e ، معالجات [type]) ؛
حذف معالجات [النوع] ؛
}
}
} ؛
window.setStyle = function (e ، o) {
إذا (typeof o == "سلسلة")
e.style.csstext = o ؛
آخر
لـ (var i in o)
e.style [i] = o [i] ؛
} ؛
var slice = array.prototype.slice ؛
window.bind = function (كائن ، ممتع) {
var args = slice.call (وسيطات) .slice (2) ؛
وظيفة الإرجاع () {
إرجاع المرح. apply (كائن ، args) ؛
} ؛
} ؛
window.bindaseventListener = function (الكائن ، المرح ، args) {
var args = slice.call (وسيطات) .slice (2) ؛
وظيفة الإرجاع (الحدث) {
return fun.apply (Object ، [event || window.event] .Concat (args)) ؛
}
} ؛
// نسخة من JQ
Window.Extend = function () {
var target = mations [0] || {} ، i = 1 ، length = edation.length ، deep = true ، Options ؛
if (typeof target === "Boolean") {
عميق = الهدف ؛
الهدف = الوسائط [1] || {} ؛
أنا = 2 ؛
}
if (typeof target! == "object" && object.prototype.toString.call (target)! = "[comfort function]")
الهدف = {} ؛
لـ (؛ i <length ؛ i ++) {
if ((خيارات = الوسائط [i])! = null)
لـ (var name in Options) {
var src = target [name] ، copy = Options [name] ؛
إذا (الهدف === نسخة)
يكمل؛
if (deep && copy && typeof copy === "object" &&! copy.nodeType) {
Target [name] = enduments.callee (deep ، src || (copy.length! = null؟ []: {}) ، copy) ؛
}
آخر إذا (نسخة! == غير محددة)
الهدف [الاسم] = نسخة ؛
}
}
الهدف الإرجاع ؛
} ؛
// نسخة من JQ
window.each = دالة (كائن ، رد الاتصال ، args) {
var name ، i = 0 ، length = object.length ؛
إذا (args) {
args = array.prototype.slice.call (الحجج) .slice (2) ؛
إذا (الطول === غير محدد) {
ل (الاسم في كائن)
if (callback.apply (Object [name] ، [name ، Object [name]]. concat (args)) === false)
استراحة؛
} آخر
لـ (؛ i <length ؛ i ++)
if (callback.apply (object [i] ، [i ، object [i]]. concat (args)) === false) //
استراحة؛
} آخر {
إذا (الطول === غير محدد) {
ل (الاسم في كائن)
if (callback.call (Object [name] ، name ، Object [name]) === false)
استراحة؛
} آخر
لـ (var value = object [0] ؛
i <length && callback.call (القيمة ، i ، القيمة)! == false ؛ value = object [++ i]) {}
}
كائن إرجاع ؛
} ؛
window.currentStyle = function (element) {
إرجاع element.currentStyle || document.defaultView.getComputedStyle (Element ، Null) ؛
} ؛
window.ObjPos = function (elem) {
var left = 0 ، top = 0 ، right = 0 ، bottom = 0 ، doc = elem؟ elem.OwnerDocument: document ؛
if (! elem.getBoundingClientRect || window.sys.ie8) {
var n = elem ؛
بينما (n) {left += n.offSetLeft ، top += n.offsettop ؛ n = n.offsetParent ؛ } ؛
اليمين = اليسار + elem.offsetwidth ؛ أسفل = أعلى + elem.offsetheight ؛
} آخر {
var rect = elem.getBoundingClientRect () ؛
اليسار = يمين = 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 element.classname.match (new regexp ('(// s |^)'+className+'(// s | $)') ؛
} ؛
window.addclass = function (element ، className) {
! window.hasclass (العنصر ، 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 ، this.move)) ؛
AddListener (وثيقة ، "mouseup" ، bind (this ، this.up)) ؛
this.options.callbackmove && this.options.callbackmove (this.elem) ؛
} ،
Move: Function (e) {
window.getSelection؟ window.getSelection (). removeallranges (): document.selection.empty () ؛
var ileft = e.clientx - this.x ، Itop =
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 verlap = {
Hostel: {} ، // 所有需要计算重合的元素
التداخل: {} ، // 已经重合的元素
init: وظيفة (elems) {
كل (elems ، وظيفة (i ، elem ، othis) {
elem.setAttribute ('verlap' ، 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: y: b}} ؛
}،هذا)؛
} ،
Setelem: function (elem) {
إذا (! elem) العودة ؛
var ret = objpos (elem) ، l = ret.left ، t = ret.top ، b = ret.bottom ، r = ret.right ؛
this.hostel [elem.getAttribute ('verlap')] = {elem: elem ، elem ، lefttopdot: {x: l ، y: t} ، leftbottomdot: {x: l ، y: b} ، righttopdot: {x: r ، y: t} ، rightbott: {x: y: y: b}} ؛
} ،
// 判断是否重合
isoverlap: وظيفة (my) {
var obj = {} ، my = this.hostel [my.getAttribute ('verlap')] ؛
كل (this.hostel ، الدالة (المفتاح ، التكوين ، 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.fttopdot.x> = config.righttopdot.x)
يعود؛
OBJ [config.elem.getattribute ('verlap')] = [config.elem ، othis.howoverlap (my ، config)] ؛
}،هذا)؛
إرجاع OBJ ؛
} ،
// 判断重合面积
Howoverlap: وظيفة (بلدي ، أخرى) {
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.ftbottomdot ، 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 [key [0]]. x ، y1 = my [key [0]]. y ، x2 = other [key [1]].
إرجاع 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: move ، callbackup: up}) ؛
تعمل UP (elem) {
لـ (var n في verlap.overlaplist)
removeclass (verlap.overlaplist [n] [0] ، 'Focus')
verlap.overlaplist = {} ؛
drag.elem.innerhtml = drag.elem.id ؛
} ؛
وظيفة التحرك (elem) {
verlap.setelem (elem) ؛
// p 为判断返回的 obj 是不是空的
var obj = verlap.isoverlap (elem) ، name ، p = function (o) {
ل (الاسم في س)
العودة كاذبة
العودة صحيح.
} (obj) ؛
// 如果是个空对象 则返回 不进行下面的遍历
if (p) {
أعلى()؛
يعود؛
} ؛
var str = '' ؛
verlap.overlaplist = obj ؛
كل (verlap.hostel ، الدالة (المفتاح ، التكوين) {
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')) ؛
verlap.init ([$ ('demo1') ، $ ('Demo2') ، $ ('Demo3') ، $ ('Demo4) ، $ (' Demo5) ، $ ('Demo6') ، $ ('Demo7') ، $ ('Demo8) ، $ (' Demo9 '))) ؛
} ؛
</script>
</body>
</html>
代码如上 ， 只是感觉效率有点低 ， 小伙伴们有没有什么优化方案呢 ， ， ， 不胜感激