原生js完美拖拽，每次刷新可以记住上次拖拽的位置

原生js完美拖拽，无bug

代码片段 1

<!DOCTYPE <a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a> PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <<a href="https://www.rokub.com/category/html" title="html" target="_blank" data-wpel-link="internal" rel="noopener noreferrer">html</a> xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>无标题文档</title> <script type=”text/javascript”> window.onload=function() { var oDiv=document.getElementById(‘div1′); oDiv.onmousedown=function(ev) { var oEvent=ev||event; var x=0; var y=0; x=oEvent.clientX-oDiv.offsetLeft; y=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function(ev) { var oEvent=ev||event; var out1=oEvent.clientX-x; var out2=oEvent.clientY-y; var oWidth=document.documentElement.clientWidth-oDiv.offsetWidth; var oHeight=document.documentElement.clientHeight-oDiv.offsetHeight; if(out1<0) {out1=0;} else if (out1>oWidth) { out1=oWidth; } if(out2<0) {out2=0;} else if (out2>oHeight) { out2=oHeight; } oDiv.style.left=out1+’px’; oDiv.style.top=out2+’px’; } document.onmouseup=function() { document.onmousemove=null; document.onmouseup=null; } return false;//解决firefox低版本的bug问题 } } </script> </head> <body> <div id=”div1″ style=”width:100px; height:100px; background:#060; border:1px solid #039; position:absolute;”> </div> </body> </html>

借助cookie来记住每次拖拽结束的位置
代码片段 2

<!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″ /> <title>无标题文档</title> <script type=”text/javascript”> function setCookie(name,value,expires) { var oDate=new Date(); oDate.setDate(oDate.getDate()+expires); document.cookie=name+’=’+value+’;expires=’+oDate; } function getCookie(name) { var arr=new Array(); arr=document.cookie.split(“; “); var i=0; for(i=0; i<arr.length;i++) { arr2=arr[i].split(“=”); if(arr2[0]==name) { return arr2[1]; } } return ”; } function removeCookie(name) { setCookie(name,’随便什么值，反正都要被删除了’,-1); } //判断a和b的原因是第一次打开，cookie中并没有相应的参数，所以当有参数时执行， //a和b只需要判断一个就好了 window.onload=function() { var oDiv=document.getElementById(‘div1’); var a=getCookie(‘xPosition’); var b=getCookie(‘yPosition’); if(a) { oDiv.style.left=a+’px’; oDiv.style.top=b+’px’; } oDiv.onmousedown=function(ev) { var oEvent=ev||event; var x=0; var y=0; x=oEvent.clientX-oDiv.offsetLeft; y=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function(ev) { var oEvent=ev||event; var out1=oEvent.clientX-x; var out2=oEvent.clientY-y; var oWidth=document.documentElement.clientWidth-oDiv.offsetWidth; var oHeight=document.documentElement.clientHeight-oDiv.offsetHeight; if(out1<0) {out1=0;} else if (out1>oWidth) { out1=oWidth; } if(out2<0) {out2=0;} else if (out2>oHeight) { out2=oHeight; } oDiv.style.left=out1+’px’; oDiv.style.top=out2+’px’; } document.onmouseup=function() { document.onmousemove=null; document.onmouseup=null; setCookie(‘xPosition’,oDiv.offsetLeft,1); setCookie(‘yPosition’,oDiv.offsetTop,1); /* alert(document.cookie); alert(oDiv.offsetLeft); alert(getCookie(‘password’)); alert(getCookie(‘expires’));*/ } return false;//解决firefox低版本的bug问题,消除默认行为 } } </script> </head> <body> <div id=”div1″ style=”width:100px; height:100px; background:#060; border:1px solid #039; position:absolute;”> </div> </body> </html>

有朋友提出出现滚动条时，就没办法拖拽到底部，我在写时用的是可视宽高，所以我现在加上滚动条修改了一下，但是，有个问题就是IE低版本下，当拖拽到边框时会出现异常状况，所以，有谁可以修改一下兼容所有浏览器啊，不胜感激
代码片段 3

原生js完美拖拽，每次刷新可以记住上次拖拽的位置

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发