仿iGoogle的模块拖动，层拖动，可自动复位

发布时间：2018-09-10 22:46:04 所属栏目：聚会来源：站长网

导读：仿iGoogle Div Drag 模块拖动，iGoogle主页上的拖动，具有自动复位的功能，智能判断Div的落点，鼠标松开后，Div可自行找到最近的落点，有意思吧？也挺人性化的。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/T

　　仿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"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{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} </style> <script type="text/javascript"></script> <title>iGoogle Div Drag 模块拖动</title> </head> <body> <div class="drag" > <h1><strong>popper.w'dragClass</strong></h1> </div> <div class="drag" > <h1>www.51js.com</h1> </div> <div class="drag" > <h1><strong>www.codefans.net</strong></h1> </div> <div class="drag"><h1>测试二</h1></div> <div class="drag"><h1>测试三</h1></div> <div class="drag"><h1>测试四</h1></div> <div class="drag"><h1>测试五</h1></div> </body> </html> <script type="text/javascript"> /* Author : popper.w Version : v2.0 */ var DragZindexNumber=0; function 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 dotted red"; position="absolute"; 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; } } } } function 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"; a++; },20); } function fCancleBubble(e) { var e = window.event || e; if (e.preventDefault) e.preventDefault(); else e.returnValue = false; } function transp(o,mode){ if(mode=="start"){ if(document.all){ o.style.filter = "Alpha(Opacity=50)"; }else{ o.style.opacity = 0.5; } } else { if(document.all){ o.style.filter = "Alpha(Opacity=100)"; }else{ o.style.opacity = 1; } } } function getOffset(evt) { var target = evt.target; if (target.offsetLeft == undefined) { 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 }; return offset; } function getPageCoord(element) { var coord = {x: 0, y: 0}; while (element) { coord.x += element.offsetLeft; coord.y += element.offsetTop; element = element.offsetParent; } return coord; } function getEventOffset(evt) { var msg = ""; if (evt.offsetX == undefined) { var evtOffsets = getOffset(evt); msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY}; } else { msg={offsetX:evt.offsetX,offsetY:evt.offsetY}; } return msg; } function fDragStart(XEle) { switch(fCkBrs()) { case 3: window.getSelection().removeAllRanges(); break; default: XEle.setCapture(); break; } } function fDragEnd(XEle) { switch(fCkBrs()) { case 3: window.getSelection().removeAllRanges(); break; default: XEle.releaseCapture(); break; } } function fCkBrs() { switch (navigator.appName) { case '<b>Opera</b>': return 2; case 'Netscape': return 3; default: return 1; } } var element=document.getElementsByTagName("div"); for(var i=0;i<element.length;i++){ if(element[i].className=="drag"){ drag(element[i])} } </script><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：济源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!