设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 576|回复: 0

[jQuery/Js/AJAX] 原生js完美拖拽,每次刷新可以记住上次拖拽的位置

[复制链接]

374

主题

381

帖子

2558

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2558
发表于 2015-3-24 22:51:05 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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

原生js完美拖拽,无bug
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript">
  7. window.onload=function()
  8. {
  9. var oDiv=document.getElementById('div1');
  10. oDiv.onmousedown=function(ev)
  11. {
  12.         var oEvent=ev||event;
  13.         var x=0;
  14.         var y=0;
  15.         x=oEvent.clientX-oDiv.offsetLeft;
  16.         y=oEvent.clientY-oDiv.offsetTop;
  17.         document.onmousemove=function(ev)
  18.         {
  19.                 var oEvent=ev||event;
  20.                 var out1=oEvent.clientX-x;
  21.                 var out2=oEvent.clientY-y;
  22.                
  23.                 var oWidth=document.documentElement.clientWidth-oDiv.offsetWidth;
  24.                 var oHeight=document.documentElement.clientHeight-oDiv.offsetHeight;

  25.                 if(out1<0)
  26.                 {out1=0;}
  27.                 else if (out1>oWidth)
  28.                 {
  29.                         out1=oWidth;
  30.                 }
  31.                
  32.                
  33.                 if(out2<0)
  34.                 {out2=0;}
  35.                 else if (out2>oHeight)
  36.                 {
  37.                         out2=oHeight;
  38.                 }
  39.                
  40.                 oDiv.style.left=out1+'px';
  41.                 oDiv.style.top=out2+'px';
  42.         }
  43.                 document.onmouseup=function()
  44.         {
  45.                 document.onmousemove=null;
  46.                 document.onmouseup=null;        
  47.         }
  48.         return false;//解决firefox低版本的bug问题
  49. }
  50. }
  51. </script>
  52. </head>

  53. <body>
  54. <div id="div1" style="width:100px; height:100px; background:#060; border:1px solid #039; position:absolute;">
  55. </div>
  56. </body>
  57. </html>
复制代码
借助cookie来记住每次拖拽结束的位置
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="utf-8" />
  5. <title>无标题文档</title>
  6. <script type="text/javascript">
  7. function setCookie(name,value,expires)
  8. {
  9.     var oDate=new Date();
  10.     oDate.setDate(oDate.getDate()+expires);
  11.     document.cookie=name+'='+value+';expires='+oDate;
  12. }

  13. function getCookie(name)
  14. {
  15.     var arr=new Array();
  16. arr=document.cookie.split("; ");
  17.     var i=0;
  18.     for(i=0; i<arr.length;i++)
  19.     {
  20.         arr2=arr[i].split("=");
  21.         if(arr2[0]==name)
  22.         {
  23.             return arr2[1];
  24.         }
  25.     }   
  26.          return '';
  27. }


  28. function removeCookie(name)
  29. {
  30.     setCookie(name,'随便什么值,反正都要被删除了',-1);
  31. }

  32. //判断a和b的原因是第一次打开,cookie中并没有相应的参数,所以当有参数时执行,
  33. //a和b只需要判断一个就好了

  34. window.onload=function()
  35. {
  36. var oDiv=document.getElementById('div1');

  37. var a=getCookie('xPosition');
  38. var b=getCookie('yPosition');

  39. if(a)
  40. {
  41. oDiv.style.left=a+'px';
  42. oDiv.style.top=b+'px';
  43. }


  44. oDiv.onmousedown=function(ev)
  45. {
  46.     var oEvent=ev||event;
  47.     var x=0;
  48.     var y=0;
  49.     x=oEvent.clientX-oDiv.offsetLeft;
  50.     y=oEvent.clientY-oDiv.offsetTop;
  51.     document.onmousemove=function(ev)
  52.     {
  53.         var oEvent=ev||event;
  54.         var out1=oEvent.clientX-x;
  55.         var out2=oEvent.clientY-y;
  56.         
  57.         var oWidth=document.documentElement.clientWidth-oDiv.offsetWidth;
  58.         var oHeight=document.documentElement.clientHeight-oDiv.offsetHeight;

  59.         if(out1<0)
  60.         {out1=0;}
  61.         else if (out1>oWidth)
  62.         {
  63.             out1=oWidth;
  64.         }
  65.         
  66.         
  67.         if(out2<0)
  68.         {out2=0;}
  69.         else if (out2>oHeight)
  70.         {
  71.             out2=oHeight;
  72.         }
  73.         
  74.         oDiv.style.left=out1+'px';
  75.         oDiv.style.top=out2+'px';
  76.     }
  77.         document.onmouseup=function()
  78.     {
  79.         document.onmousemove=null;
  80.         document.onmouseup=null;
  81.         setCookie('xPosition',oDiv.offsetLeft,1);   
  82.         setCookie('yPosition',oDiv.offsetTop,1);
  83.         /* alert(document.cookie);
  84.         alert(oDiv.offsetLeft);
  85.         alert(getCookie('password'));
  86.         alert(getCookie('expires'));*/
  87.     }
  88.     return false;//解决firefox低版本的bug问题,消除默认行为
  89. }
  90. }
  91. </script>
  92. </head>

  93. <body>
  94. <div id="div1" style="width:100px; height:100px; background:#060; border:1px solid #039; position:absolute;">
  95. </div>
  96. </body>
  97. </html>
复制代码


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-10 20:43

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表