Javascript asli melaksanakan penyeretan DIV dan pengiraan kemahiran kawasan

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

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Javascript asli melaksanakan penyeretan DIV dan pengiraan kemahiran kawasan_javascript berulang