仿iGoogle Div Drag 模块拖动，iGoogle主页上的拖动，具有自动复位的功能，智能判断Div的落点，鼠标松开后，Div可自行找到最近的落点，有意思吧？也挺人性化的。 演示： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <style type="text/css"><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 /> </style><br /> <script type="text/javascript"></script><br /> <title>iGoogle Div Drag 模块拖动</title><br /> </head><br /> <body><br /> <div class="drag" ><br /> <h1><strong>popper.w'dragClass</strong></h1><br /> </div><br /> <div class="drag" ><br /> <h1>www.51js.com</h1><br /> </div><br /> <div class="drag" ><br /> <h1><strong>www.codefans.net</strong></h1><br /> </div><br /> <div class="drag"><h1>测试二</h1></div><br /> <div class="drag"><h1>测试三</h1></div><br /> <div class="drag"><h1>测试四</h1></div><br /> <div class="drag"><h1>测试五</h1></div><br /> </body><br /> </html><br /> <script type="text/javascript"><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 /> 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 /> default:<br /> XEle.releaseCapture();<br /> break;<br /> }<br /> }<br /> function fCkBrs()<br /> {<br /> switch (navigator.appName)<br /> {<br /> case '<b>Opera</b>': 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 /> </script><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 点击按钮弹出层DIV，有关闭按钮，JS+Css完成JS点击弹出模态对话框，可拖拽，遮罩层效果
