以下是div层任意拖动的代码，我想实现在拖动层到一个位置后，即使刷新页面，层的位置也不在复位(好像可以通过cooikes实现)。请高手指点
<html>
<style type="text/css">
<!--
body {font-family:Verdana; font-size:11px; color:#333333;}
#layer1 {position:absolute; left:100px; top:100px; width:300px; height:200px;}
#layer2 {position:absolute; left:200px; top:350px; width:300px; height:200px;}
.title {width:100%; height:30px; font-size:16px; font-weight:bold; border:1px solid #9BC8F0; background- color:#CFF0FA;color:#0066FF; cursor:move;}
.main {width:100%; height:170px; border:1px solid #9BC8F0;}
-->
</style>
<script>
var x0=0,y0=0,x1=0,y1=0;
var moveable=false; //开始拖动;
function startDrag(obj){
if(event.button==1){
obj.setCapture(); //设置属于当前对象的鼠标捕捉
var win = obj.parentNode;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
} //拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
}
} //停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture(); //释放当前对象的鼠标捕捉
moveable = false;
}
}
</script> <body>
<div id="layer1">
<div class="title" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">点击这里拖动1 </div>
<div class="main">
<p style="font:24px">1111111111111111111 </p>
<p style="font:24px">1111111111111111111 </p>
</div>
</div>
<div id="layer2">
<div class="title" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">点击这里拖动2 </div>
<div class="main">
<p style="font:24px">2222222222222222222 </p>
<p style="font:24px">2222222222222222222 </p>
</div>
</div>
</body>
</html>
<html>
<style type="text/css">
<!--
body {font-family:Verdana; font-size:11px; color:#333333;}
#layer1 {position:absolute; left:100px; top:100px; width:300px; height:200px;}
#layer2 {position:absolute; left:200px; top:350px; width:300px; height:200px;}
.title {width:100%; height:30px; font-size:16px; font-weight:bold; border:1px solid #9BC8F0; background- color:#CFF0FA;color:#0066FF; cursor:move;}
.main {width:100%; height:170px; border:1px solid #9BC8F0;}
-->
</style>
<script>
var x0=0,y0=0,x1=0,y1=0;
var moveable=false; //开始拖动;
function startDrag(obj){
if(event.button==1){
obj.setCapture(); //设置属于当前对象的鼠标捕捉
var win = obj.parentNode;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
} //拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
}
} //停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture(); //释放当前对象的鼠标捕捉
moveable = false;
}
}
</script> <body>
<div id="layer1">
<div class="title" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">点击这里拖动1 </div>
<div class="main">
<p style="font:24px">1111111111111111111 </p>
<p style="font:24px">1111111111111111111 </p>
</div>
</div>
<div id="layer2">
<div class="title" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">点击这里拖动2 </div>
<div class="main">
<p style="font:24px">2222222222222222222 </p>
<p style="font:24px">2222222222222222222 </p>
</div>
</div>
</body>
</html>
<style type="text/css">
<!--
body {font-family:Verdana; font-size:11px; color:#333333;}
#layer1 {position:absolute; left:100px; top:100px; width:300px; height:200px;}
#layer2 {position:absolute; left:200px; top:350px; width:300px; height:200px;}
.title {width:100%; height:30px; font-size:16px; font-weight:bold; border:1px solid #9BC8F0; background- color:#CFF0FA;color:#0066FF; cursor:move;}
.main {width:100%; height:170px; border:1px solid #9BC8F0;}
-->
</style>
<script>
var x0=0,y0=0,x1=0,y1=0;
var moveable=false; //开始拖动;
function startDrag(obj){
if(event.button==1){
obj.setCapture(); //设置属于当前对象的鼠标捕捉
var win = obj.parentNode;
x0 = event.clientX;
y0 = event.clientY;
x1 = parseInt(win.offsetLeft);
y1 = parseInt(win.offsetTop);
moveable = true;
}
} //拖动;
function drag(obj){
if(moveable){
var win = obj.parentNode;
win.style.left = x1 + event.clientX - x0;
win.style.top = y1 + event.clientY - y0;
}
} //停止拖动;
function stopDrag(obj){
if(moveable){
obj.releaseCapture(); //释放当前对象的鼠标捕捉
moveable = false;
SetCookie(obj.parentNode.id,obj.parentNode.id+","+obj.parentNode.offsetTop+","+obj.parentNode.offsetLeft);
}
}window.onload=function(){
var l1=document.getElementById("layer1");
var l2=document.getElementById("layer2");
var l1c=GetCookie(l1.id);
var l2c=GetCookie(l2.id);
if(l1c){
l1.style.top=parseInt(l1c.split(",")[1]);
l1.style.left=parseInt(l1c.split(",")[2]);
}
if(l2c){
l2.style.top=parseInt(l2c.split(",")[1]);
l2.style.left=parseInt(l2c.split(",")[2]);
}
}
// Create a cookie with the specified name and value.
// The cookie expires at the end of the 21th century.
function SetCookie(sName, sValue)
{
date = new Date(2099,11,31);
document.cookie = sName + "=" + escape(sValue) + "; expires=" + date.toGMTString();
}// Retrieve the value of the cookie with the specified name.
function GetCookie(sName)
{
// cookies are separated by semicolons
var aCookie = document.cookie.split("; ");
for (var i=0; i < aCookie.length; i++)
{
// a name/value pair (a crumb) is separated by an equal sign
var aCrumb = aCookie[i].split("=");
if (sName == aCrumb[0])
return unescape(aCrumb[1]);
}
// a cookie with the requested name does not exist
return null;
}
</script> <body>
<div id="layer1">
<div class="title" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">点击这里拖动1 </div>
<div class="main">
<p style="font:24px">1111111111111111111 </p>
<p style="font:24px">1111111111111111111 </p>
</div>
</div>
<div id="layer2">
<div class="title" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">点击这里拖动2 </div>
<div class="main">
<p style="font:24px">2222222222222222222 </p>
<p style="font:24px">2222222222222222222 </p>
</div>
</div>
</body>
</html>