本文实例讲述了js实现iGoogleDivDrag模块拖动层拖动特效的方法。分享给大家供大家参考。具体实现方法如下： 复制代码 代码如下: js实现iGoogle Div Drag 模块拖动 层拖动效果 <br /> *{margin:0px; padding:0px;}<br /> body{position:relative; width:780px; height:800px; border:1px solid red}<br /> .drag{width:200px; height:100px; border:1px solid #000;margin:20px; background:#fff}<br /> .drag h1{margin:0px; padding:0px; font-size:12px; height:18px; line-height:18px; background:#E0E7F3; text-indent:20px;cursor:move;}<br /> .center{ margin:200px; border:3px solid red}<br /> www.baidu.com www.163.com www.jb51.net 测试二 测试三 测试四 测试五 <br /> /*<br /> Author : popper.w<br /> Version : v2.0<br /> */<br /> var DragZindexNumber=0;<br /> function drag(obj){<br /> var ox,oy,ex,xy,tag=0,mask=0;<br /> if(tag==0){<br /> obj.onmousedown=function(e)<br /> { <br /> if(mask==1){return; }<br /> obj.style.zIndex=DragZindexNumber++;<br /> transp(obj,"start")<br /> tag=1;<br /> var e = e||window.event; <br /> ex=getEventOffset(e).offsetX;<br /> ey=getEventOffset(e).offsetY;<br /> ox=parseInt(obj.offsetLeft);<br /> oy=parseInt(obj.offsetTop);<br /> tempDiv=document.createElement("div"); <br /> with(tempDiv.style)<br /> {<br /> width=obj.offsetWidth+"px";<br /> height=obj.offsetHeight+"px";<br /> border="1px dotted red";<br /> position="absolute";<br /> left=obj.offsetLeft+"px";<br /> top=obj.offsetTop+"px";<br /> zIndex=999;<br /> }<br /> document.body.appendChild(tempDiv);<br /> this.ele=tempDiv;<br /> fDragStart(tempDiv);<br /> document.body.onmousemove=function(e){<br /> if(tag==1)<br /> { <br /> var e=e||window.event;<br /> tempDiv.style.left=parseInt(e.clientX)-ex+"px";<br /> tempDiv.style.top=parseInt(e.clientY)-ey+"px";<br /> }<br /> else{if(!tempDiv==null)tempDiv.parentNode.removeChild(tempDiv)}<br /> }<br /> tempDiv.onmouseup=function(e)<br /> {<br /> var e=e||window.event;<br /> fDragEnd(tempDiv);<br /> obj.style.position="absolute";<br /> movie(obj,parseInt(e.clientX)-ex-19,parseInt(e.clientY)-ey-20);<br /> tempDiv.parentNode.removeChild(tempDiv);<br /> tag=0;<br /> }<br /> }<br /> }<br /> }<br /> function movie(o,l,t){<br /> var a=1;<br /> mask=1;<br /> var ol=parseInt(o.offsetLeft);<br /> var ot=parseInt(o.offsetTop);<br /> var iTimer=setInterval(function(){<br /> if(a==10)<br /> {<br /> transp(o,"end");<br /> mask=0;<br /> clearInterval(iTimer);<br /> }<br /> o.style.left=ol+a*(l-ol)/10+"px";<br /> o.style.top=ot+a*(t-ot)/10+"px";<br /> a++;<br /> },20);<br /> }<br /> function fCancleBubble(e)<br /> {<br /> var e = window.event || e;<br /> if (e.preventDefault) e.preventDefault();<br /> else e.returnValue = false;<br /> }<br /> function transp(o,mode){<br /> if(mode=="start"){<br /> if(document.all){<br /> o.style.filter = "Alpha(Opacity=50)";<br /> }else{<br /> o.style.opacity = 0.5;<br /> }<br /> }<br /> else {<br /> if(document.all){<br /> o.style.filter = "Alpha(Opacity=100)";<br /> }else{<br /> o.style.opacity = 1;<br /> }<br /> }<br /> }<br /> function getOffset(evt)<br /> {<br /> var target = evt.target;<br /> if (target.offsetLeft == undefined)<br /> {<br /> target = target.parentNode;<br /> }<br /> var pageCoord = getPageCoord(target);<br /> var eventCoord =<br /> {<br /> x: window.pageXOffset + evt.clientX,<br /> y: window.pageYOffset + evt.clientY<br /> };<br /> var offset =<br /> {<br /> offsetX: eventCoord.x - pageCoord.x,<br /> offsetY: eventCoord.y - pageCoord.y<br /> };<br /> return offset;<br /> }<br /> function getPageCoord(element)<br /> {<br /> var coord = {x: 0, y: 0};<br /> while (element)<br /> {<br /> coord.x += element.offsetLeft;<br /> coord.y += element.offsetTop;<br /> element = element.offsetParent;<br /> }<br /> return coord;<br /> }<br /> function getEventOffset(evt)<br /> {<br /> var msg = "";<br /> if (evt.offsetX == undefined)<br /> {<br /> var evtOffsets = getOffset(evt);<br /> msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY};<br /> }<br /> else<br /> {<br /> msg={offsetX:evt.offsetX,offsetY:evt.offsetY};<br /> }<br /> return msg;<br /> }<br /> function fDragStart(XEle)<br /> {<br /> switch(fCkBrs())<br /> {<br /> case 3:<br /> window.getSelection().removeAllRanges();<br /> break;<br /> <br /> default:<br /> XEle.setCapture();<br /> break;<br /> }<br /> }<br /> function fDragEnd(XEle)<br /> {<br /> switch(fCkBrs())<br /> {<br /> case 3:<br /> window.getSelection().removeAllRanges();<br /> break;<br /> <br /> default:<br /> XEle.releaseCapture();<br /> break;<br /> }<br /> }<br /> function fCkBrs()<br /> {<br /> switch (navigator.appName)<br /> {<br /> case 'Opera': return 2;<br /> case 'Netscape': return 3;<br /> default: return 1;<br /> }<br /> } <br /> var element=document.getElementsByTagName("div");<br /> for(var i=0;i<element.length;i++){<br /> if(element[i].className=="drag"){<br /> drag(element[i])}<br /> <br /> }<br /> 希望本文所述对大家的javascript程序设计有所帮助。
