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

原生

代码片段 1

/p>

借助cookie来记住每次拖拽结束的位置

代码片段 2

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

无标题文档

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

{

arr2=arr[i].split(“=”);

if(arr2[0]==name)

{

return arr2[1];

}

}

return ”;

}

function removeCookie(name)

{

setCookie(name,’随便什么值，反正都要被删除了’,-1);

}

//判断a和b的原因是第一次打开，cookie中并没有相应的参数，所以当有参数时执行，

//a和b只需要判断一个就好了

window.οnlοad=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.οnmοusedοwn=function(ev)

{

var oEvent=ev||event;

var x=0;

var y=0;

x=oEvent.clientX-oDiv.offsetLeft;

y=oEvent.clientY-oDiv.offsetTop;

document.οnmοusemοve=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.οnmοuseup=function()

{

document.οnmοusemοve=null;

document.οnmοuseup=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问题,消除默认行为

}

}

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

代码片段 3

-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

无标题文档

window.οnlοad=function()

{

var oDiv=document.getElementById(‘div1′);

oDiv.οnmοusedοwn=function(ev)

{

var oEvent=ev||event;

var x=0;

var y=0;

x=oEvent.clientX-oDiv.offsetLeft;

y=oEvent.clientY-oDiv.offsetTop;

document.οnmοusemοve=function(ev)

{

var oEvent=ev||event;

var out1=oEvent.clientX+oDiv.scrollLeft-x;

var out2=oEvent.clientY+oDiv.scrollTop-y;

console.log(out1);

console.log(out2);

var oWidth=document.documentElement.scrollWidth-oDiv.offsetWidth;

var oHeight=document.documentElement.scrollHeight-oDiv.offsetHeight;

console.log(oWidth);

console.log(oHeight);

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.οnmοuseup=function()

{

document.οnmοusemοve=null;

document.οnmοuseup=null;

}

return false;//解决firefox低版本的bug问题

}

}