Natives Javascript implementiert DIV-Ziehen und die Berechnung wiederholter Bereiche_Javascript-Fähigkeiten

Code kopieren Der Code lautet wie folgt: 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 (Funktion(Fenster,undefiniert){ window.Sys = Funktion (ua){ var b = { dh: /msie/.test(ua) && !/opera/.test(ua), Oper: /opera/.test(ua), Safari: /webkit/.test(ua) && !/chrome/.test(ua), Firefox: /firefox/.test(ua), chrome: /chrome/.test(ua) },vMark = ""; für (var i in b) { if (b[i]) { vMark = "safari" == i ? "Version" : i; brechen; } } 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; return b; }(window.navigator.userAgent.toLowerCase()); window.Sys.ie6&&document.execCommand("BackgroundImageCache", false, true);

Var-Überlappung = { Herberge :{}, //所有需要计算重合的元素 OverlapList :{}, //已经重合的元素 init: function(elems){ every(elems,function(i,elem,oThis){ elem.setAttribute('overlap',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}}; },this); }, setElem:function(elem){ if(!elem)return; 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')]; every(this.hostel,function(key,config,oThis){ // 是元素本身 则返回 if(config.elem === my.elem)return ; //判断2个div是否重合 如果不重合 则返回 if(my.leftBottomDot.y =config.leftBottomDot.y||my.rightTopDot.x =config.rightTopDot.x) zurück; obj[config.elem.getAttribute('overlap')] = [config.elem,oThis.howOverlap(my,config)]; },this); return 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=other[key[1]].y; return Math.abs((x1-x2)*(y1-y2)); }; //完全重合 if(arr.length===4){ Rückgabe 162*162; }; }, //看点是不是在另一个div中 include: function(dot,l,r,t,b,key){ return (dot.x>=l&&dot.x =t&&dot.y } }; window.onload = function(){ extension(Drag.options,{callbackmove:move,callbackup:up}); Funktion up(elem){ for(var n in Overlap. OverlapList) removeClass(overlap.overlapList[n][0],'focus') Overlap.overlapList = {}; Drag.elem.innerHTML =Drag.elem.id; };

Funktion move(elem){ laplap.setElem(elem); //p wird verwendet, um zu bestimmen, ob das zurückgegebene Objekt leer ist var obj = Overlap.isOverlap(elem),name,p = function(o){ für (Name in o) return false; return true; }(obj); //Wenn es sich um ein leeres Objekt handelt, kehren Sie zurück und führen Sie den folgenden Durchlauf nicht aus if(p){ up(); zurück; }; var str =''; Overlap.overlapList = obj; every(overlap.hostel,function(key,config){ If(obj[key]){ addClass(obj[key][0],'focus'); str = str 'Der Bereich, der ' obj[key][0].id ' überlappt, ist:' obj[key][1] ' '; }sonst{ 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')]); };

Der Code ist wie oben, aber ich habe das Gefühl, dass die Effizienz etwas gering ist. Habt ihr irgendwelche Optimierungspläne? Vielen Dank

Natives Javascript implementiert DIV-Ziehen und die Berechnung wiederholter Bereiche_Javascript-Fähigkeiten

In Verbindung stehende Artikel