www.baidu.com

Das Beispiel in diesem Artikel beschreibt die Methode zum Implementieren des Drag-Layer-Drag-Effekts des iGoogleDivDrag-Moduls in js. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

Code kopieren Der Code lautet wie folgt: js实现iGoogle Div Drag 模块拖动 层拖动效果 *{margin:0px; padding:0px;} body{position:relative; width:780px; height:800px; border:1px solid red} .drag{width:200px; height:100px; border:1px solid #000;margin:20px; background:#fff} .drag h1{margin:0px; padding:0px; font-size:12px; height:18px; line-height:18px; background:#E0E7F3; text-indent:20px;cursor:move;} .center{ margin:200px; border:3px solid red} www.baidu.com www.163.com www.jb51.net 测试二 测试三 测试四 测试五 /* Autor: popper.w Version: v2.0 */ var DragZindexNumber=0; Funktion Drag(obj){ var ox,oy,ex,xy,tag=0,mask=0; if(tag==0){ obj.onmousedown=function(e) { if(mask==1){return; } obj.style.zIndex=DragZindexNumber ; transp(obj,"start") tag=1; var e = e||window.event; ex=getEventOffset(e).offsetX; ey=getEventOffset(e).offsetY; ox=parseInt(obj.offsetLeft); oy=parseInt(obj.offsetTop); tempDiv=document.createElement("div"); with(tempDiv.style) { width=obj.offsetWidth "px"; height=obj.offsetHeight "px"; border="1px gepunktet rot"; position="absolut"; left=obj.offsetLeft "px"; top=obj.offsetTop "px"; zIndex=999; } document.body.appendChild(tempDiv); this.ele=tempDiv; fDragStart(tempDiv); document.body.onmousemove=function(e){ if(tag==1) { var e=e||window.event; tempDiv.style.left=parseInt(e.clientX)-ex "px"; tempDiv.style.top=parseInt(e.clientY)-ey "px"; } else{if(!tempDiv==null)tempDiv.parentNode.removeChild(tempDiv)} } tempDiv.onmouseup=function(e) { var e=e||window.event; fDragEnd(tempDiv); obj.style.position="absolute"; movie(obj,parseInt(e.clientX)-ex-19,parseInt(e.clientY)-ey-20); tempDiv.parentNode.removeChild(tempDiv); tag=0; } } } } Funktion movie(o,l,t){ var a=1; mask=1; var ol=parseInt(o.offsetLeft); var ot=parseInt(o.offsetTop); var iTimer=setInterval(function(){ if(a==10) { transp(o,"end"); mask=0; clearInterval(iTimer); } o.style.left=ol a*(l-ol)/10 "px"; o.style.top=ot a*(t-ot)/10 "px"; ein ; },20); } Funktion fCancleBubble(e) { var e = window.event || e; if (e.preventDefault) e.preventDefault(); sonst e.returnValue = false; } Funktion transp(o,mode){ if(mode=="start"){ if(document.all){ o.style.filter = "Alpha(Opacity=50)"; }else{ o.style.opacity = 0.5; } } sonst { if(document.all){ o.style.filter = "Alpha(Opacity=100)"; }else{ o.style.opacity = 1; } } } Funktion getOffset(evt) { var target = evt.target; if (target.offsetLeft == undefiniert) { target = target.parentNode; } var pageCoord = getPageCoord(target); var eventCoord = { x: window.pageXOffset evt.clientX, y: window.pageYOffset evt.clientY }; var offset = { offsetX: eventCoord.x - pageCoord.x, offsetY: eventCoord.y - pageCoord.y }; Rückgabeoffset; } Funktion getPageCoord(element) { var coord = {x: 0, y: 0}; while (Element) { coord.x = element.offsetLeft; coord.y = element.offsetTop; element = element.offsetParent; } Rückkehrkoordinate; } Funktion getEventOffset(evt) { var msg = ""; if (evt.offsetX == undefiniert) { var evtOffsets = getOffset(evt); msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY}; } sonst { msg={offsetX:evt.offsetX,offsetY:evt.offsetY}; } return msg; } Funktion fDragStart(XEle) { switch(fCkBrs()) { Fall 3: window.getSelection().removeAllRanges(); Pause; Standard: XEle.setCapture(); Pause; } } Funktion fDragEnd(XEle) { switch(fCkBrs()) { Fall 3: window.getSelection().removeAllRanges(); Pause; Standard: XEle.releaseCapture(); Pause; } } Funktion fCkBrs() { Schalter (navigator.appName) { Fall 'Opera': return 2; Fall 'Netscape': return 3; Standard: Rückgabe 1; } } var element=document.getElementsByTagName("div"); for(var i=0;i if(element[i].className=="drag"){ Drag(element[i])}

} Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

js-Methode zum Implementieren des iGoogleDivDrag-Moduls, Drag-Layer-Drag-Effekt_Javascript-Fähigkeiten

www.baidu.com

www.163.com

www.jb51.net

测试二

测试三

测试四

测试五