Javascript asli melaksanakan penyeretan DIV dan pengiraan kemahiran kawasan_javascript berulang

Salin kod Kod adalah seperti berikut: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> http://www.w3.org/1999/xhtml "> Table body{margin:0px; padding:0px; font-size:12px} .div{height:160px;width:160px;position:absolute; text-align:center; } .demo1{ border:1px solid #96C2F1;background-color:#EFF7FF;left:150px;top:20px} .demo2{ border:1px solid #9BDF70;background-color:#F0FBEB;left:450px;top:20px} .demo3{ border:1px solid #BBE1F1;background-color:#EEFAFF;left:750px;top:20px} .demo4{ border:1px solid #96C2F1;background-color:#EEFAFF;left:150px;top:220px} .demo5{ border:1px solid #FFCC00;background-color:#FFFFF7;left:450px;top:220px} .demo6{ border:1px solid #E3E197;background-color:#FFFFDD;left:750px;top:220px} .demo7{ border:1px solid #ADCD3C;background-color:#F2FDDB;left:150px;top:420px} .demo8{ border:1px solid #F8B3D0;background-color:#FFF5FA;left:450px;top:420px} .demo9{ border:1px solid #D3D3D3;background-color:#F7F7F7;left:750px;top:420px} .focus{background-color: #990000;} demo1 demo2 demo3 demo4 demo5 demo6 demo7 demo8 demo9 (fungsi(tetingkap, tidak ditentukan){ window.Sys = fungsi (ua){ var b = { iaitu: /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 dalam b) { jika (b[i]) { vMark = "safari" == i ? "versi" : i; pecah; } } 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("BackgroundImageCache", false, true);

tetingkap.$ = function(Id){ pulangkan document.getElementById(Id); }; window.addListener = fungsi(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 = fungsi(elemen,e,fn){ pengendali var = element.events[e],type; jika(fn){ untuk(taipkan pengendali) if(pengendali[jenis]===fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" e,fn); padamkan pengendali[jenis]; } }lain{ untuk(taipkan pengendali){ element.removeEventListener?element.removeEventListener(e,pengendali[jenis],false):element.detachEvent("on" e,pengendali[jenis]); padamkan pengendali[jenis]; } } }; window.setStyle = fungsi(e,o){ if(typeof o=="string") e.style.cssText=o; lain untuk(var i dalam o) e.gaya[i] = o[i]; };

bertindih var = { asrama :{}, //所有需要计算重合的元素 senarai tindih :{}, //已经重合的元素 init: fungsi(elem){ setiap(elem,fungsi(i,elem,oIni){ elem.setAttribute('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){ jika(!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')]; setiap (ini.asrama,fungsi(kunci,konfigurasi,oIni){ // 是元素本身 则返回 if(config.elem === my.elem)kembali ; //判断2个div是否重合 如果不重合 则返回 if(my.leftBottomDot.y =config.leftBottomDot.y||my.rightTopDot.x kembali; obj[config.elem.getAttribute('overlap')] = [config.elem,oThis.howOverlap(my,config)]; },ini); pulangkan obj; }, //判断重合面积 howOverlap : function(my, other){ 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; 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]].x ,y2=lain[kunci[1]].y; kembalikan Math.abs((x1-x2)*(y1-y2)); }; //完全重合 if(arr.length====4){ kembali 162*162; }; }, //看点是不是在另一个div中 sertakan : fungsi(titik,l,r,t,b,kunci){ kembali (dot.x>=l&&dot.x =t&&dot.y } }; window.onload = function(){ lanjutkan(Drag.options,{callbackmove:move,callbackup:up}); fungsi atas(elem){ untuk(var n dalam tindih. Senarai tindih) removeClass(overlap.overlapList[n][0],'focus') overlap.overlapList = {}; Drag.elem.innerHTML =Drag.elem.id; };

Pergerakan fungsi(elemen){ overlap.setElem(elem); //p digunakan untuk menentukan sama ada obj yang dikembalikan kosong var obj = overlap.isOverlap(elem),name,p = function(o){ untuk (nama dalam o) pulangan palsu; kembali benar; }(obj); //Jika ia adalah objek kosong, kembali dan jangan lakukan traversal berikut jika(p){ atas(); kembali; }; var str =''; overlap.overlapList = obj; setiap satu(overlap.hostel,function(key,config){ Jika(obj[kunci]){ addClass(obj[key][0],'focus'); str = str 'Kawasan yang bertindih ' obj[key][0].id ' ialah:' obj[key][1] ' '; } lain{ 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')]); };

Kodnya seperti di atas, tetapi rasanya tidak cekap. Adakah anda mempunyai sebarang rancangan pengoptimuman. Sila maklumkan kepada saya. Terima kasih banyak