用ajax技术 或jsp+cookies技术保存个性网页模式到客户端，向高手们请教

[ymf1223]

小弟做的网页布局可以拖动，我想在客户端保存整个网页拖动后的布局，那该该怎么做呢？以下是可拖动的网页代码，就是实现不了在客户端保存拖动后的效果，有哪位大侠能够出手相助帮忙小弟弄一下，不甚感激。再此磕头拜谢了！
<style>
*{font-size:12px}
.dragTable{
font-size:12px;
/*border-top:1px solid #3366cc;*/
margin-bottom: 10px;
width:100%;
background-color:#FFFFFF;
}
td{vertical-align:top;}
.dragTR{
cursor:move;
color:#7787cc;
/*background: url(image/a2.gif) white;*/

background-color:#e5eef9;
height:18px;
padding-left:0px;
font-weight:bold;
}
#parentTable{

letter-spacing:25px;
}
</style>
<script defer>
/****JoeLee************E-MAIL:[e-mail]****QQ:48293707*****11:09 2006-2-9******/
var draged=false;//初始化，刚开始没有拖动
tdiv=null;//tdiv为NULL，有下文可知tdiv是拖动的那个半透明的咚咚

//拖动开始的函数
function dragStart(){
ao=event.srcElement;//找到被拖动的咚咚
if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent;
/*如果是TD或者是TR，就找他们的容器，DHTML手册上的描述是(container object that defines the offsetTop and offsetLeft properties of the object)。在这里无论TD还是TR，他们所在的容器都是所在的table*/
else return;//如果不是td和tr，那就不拖动了，直接return结束函数了事
draged=true;//拖动开始，设置环境变量为true
tdiv=document.createElement("div");//创建div，被拖动的咚咚
tdiv.innerHTML=ao.outerHTML;//把table的内容复制到div里边,注意，嵌套table，这个table是td内部有内容的那个
tdiv.style.display="block";
tdiv.style.position="absolute";//设置position为绝对位置，方便坐标定位来拖动
tdiv.style.filter="alpha(opacity=70)";//半透明
tdiv.style.cursor="move";//鼠标样式为拖动
tdiv.style.width=ao.offsetWidth;//设定宽度
tdiv.style.height=ao.offsetHeight;//设定高度
tdiv.style.top=getInfo(ao).top;//设定位置
tdiv.style.left=getInfo(ao).left;//设定位置
document.body.appendChild(tdiv);//在body内加入此div
lastX=event.clientX+document.body.scrollLeft;//全局变量，记录事件位置
lastY=event.clientY+document.body.scrollTop;//全局变量，记录事件位置
lastLeft=tdiv.style.left;//全局变量，记录div位置
lastTop=tdiv.style.top;//全局变量，记录div位置
try{
ao.dragDrop();//初始化拖曳事件
}catch(e){}
}
//拖动函数
function draging(){//重要:判断MOUSE的位置
if(!draged)return;//如果没拖动,退出函数
var tX=event.clientX+document.body.scrollLeft;//记录事件位置
var tY=event.clientY+document.body.scrollTop;//记录事件位置
tdiv.style.left=parseInt(lastLeft)+tX-lastX;//计算并移动tdiv
tdiv.style.top=parseInt(lastTop)+tY-lastY;//计算并移动tdiv
for(var i=0;i<parentTable.cells.length;i++){//循环计算判断tdiv和parentTable的两个TD位置
var parentCell=getInfo(parentTable.cells[i]);//getInfo是得到位置的函数，得到TD的位置
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
//判断鼠标是否在TD内部，在内部，就要变换其他的位置了
var subTables=parentTable.cells[i].getElementsByTagName("table");//得到TD内部所有的table
if(subTables.length==0){//如果没有table
if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
parentTable.cells[i].appendChild(ao);//把ao给加进td去
}
break;//如果加进去后，就不用循环了。注:此时拖动尚未结束，是拖动中，table位置的变化
}
for(var j=0;j<subTables.length;j++){//如果有table，还要判断他们的位置
var subTable=getInfo(subTables[j]);//的到table位置
if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){//判断位置
parentTable.cells[i].insertBefore(ao,subTables[j]);//加入到此table之前
break;
}else{
parentTable.cells[i].appendChild(ao);//如果位置在td的最下方，则加入到最后。注:此时拖动尚未结束，是拖动中，table位置的变化
}
}
}
}
}
//拖动结束的函数
function dragEnd(){
if(!draged)return;//如果没拖动，退出函数
draged=false;//结束拖动，设置变量为false
mm=ff(150,15);//恢复位置，就是把div缓缓移动到ao的位置
}

//很easy，不说了
function getInfo(o){//取得坐标
var to=new Object();
to.left=to.right=to.top=to.bottom=0;
var twidth=o.offsetWidth;
var theight=o.offsetHeight;
while(o!=document.body){
to.left+=o.offsetLeft;
to.top+=o.offsetTop;
o=o.offsetParent;
}
to.right=to.left+twidth;
to.bottom=to.top+theight;
to.toString=function(){return to.left+":"+to.right+":"+to.top+":"+to.bottom};
return to;
}

function ff(aa,ab){//从GOOGLE网站来,用于恢复位置
var ac=parseInt(getInfo(tdiv).left);//得到div的位置
var ad=parseInt(getInfo(tdiv).top);//得到div的位置
var ae=(ac-getInfo(ao).left)/ab;//计算要移动的长度
var af=(ad-getInfo(ao).top)/ab;//计算要移动的长度
return setInterval(function(){if(ab<1){//当移动结束的时候
clearInterval(mm);//清理时间函数
tdiv.removeNode(true);//去掉div
ao=null;//把全局变量ao设为Null
return//结束时间函数
}
//如果移动没有结束
ab--;
ac-=ae;
ad-=af;
//计算此次移动的目的点
tdiv.style.left=parseInt(ac)+"px";
tdiv.style.top=parseInt(ad)+"px"
//移动div
}
,aa/ab)//注意，这个aa/bb是setInterval的第二个参数，时间参数
}

//给table们加上事件
function inint(){//初始化
for(var i=0;i<parentTable.cells.length;i++){
var subTables=parentTable.cells[i].getElementsByTagName("table");
for(var j=0;j<subTables.length;j++){
if(subTables[j].className!="dragTable")break;
subTables[j].rows[0].className="dragTR";
subTables[j].rows[0].attachEvent("onmousedown",dragStart);
subTables[j].attachEvent("ondrag",draging);
subTables[j].attachEvent("ondragend",dragEnd);
}
}
}
inint();
</script>


<body >
<div id="content-top" style="background-color:#33FFFF "></div>
<table width="812" height=601 border="0" align="center" cellpadding="0" cellspacing="2" id="parentTable">
<tr >
<td width="263" valgin="top">

<table width="263" border=0 cellspacing="0" class="dragTable" style="border:1px solid #D5D5D5" >
<tr>
<td height="25" colspan="2" >GMAIL</td>
</tr>
<tr>
<td width="118" height="190"><img src="Image/peo01.jpg" width="100%" height="90%"><br/> </td>
<td width="139">暂时无法显示GMAIL内容</td>
<tr>
</table>
<table border=0 class="dragTable" cellspacing="0" style="border:1px solid #D5D5D5">
<tr>
<td>新浪体育</td>
</tr>
<tr>
<td>解剖威队独门利器FW28 2万转引擎匹配超级变速器颁奖：辛吉斯欣喜能以冠军起步<br/> 印度搭档创下纪录法新社前瞻冬奥短道速滑：中韩唱主角 美加施冷箭</td>
<tr>
</table>
<table border=0 class="dragTable" cellspacing="0" style="border:1px solid #D5D5D5">
<tr>
<td height="20">焦点</td>
</tr>
<tr>
<td>京广线中断4小时20临客返汉晚点 中国新闻网-湖北分社 - 所有 235 相关报道 »哈马斯已有总理人选
解放日报报业集团 - 所有 489 相关报道 »陈水扁是两岸关系麻烦制造者 武汉晨报 - 所有 179 相关报道 »</td>
<tr>
</table>
</td>
<td width="594"><table width="100%" border=0 cellpadding="0" cellspacing="0" class="dragTable" >
<tr>
<td width="2%"><img src="Image/ww_1.jpg" width="12" height="25"></td>
<td width="90%" height="25" > 中关村在线</td>
<td width="8%" valign="top" ><img src="Image/ww_3.jpg" width="45" height="25"></td>
</tr>
<tr>
<td colspan="3"><table width="100%" border="0" align="center" cellpadding="2" cellspacing="2" style="border:1px solid #D5D5D5">
<tr >
<td bgcolor="#FFFFFF" >新年行情速递 双敏板卡低价推荐 终于等到了，映泰6600GT一降降一百 罗技G15游戏键盘热力促销，代购价仅529元 </td>
</tr>
<tr >
<td bgcolor="#FFFFFF" > </td>
</tr>
</table></td>
<tr>
</table></td>
</tr>
</table>

[ymf1223]

大家可以先复制代码浏览，图层可以拖动。

[lirui415]

来接分~

[左大神在这]

up

[ymf1223]

有位朋友用以下方法，可我还是不怎么理解。不知道如何用
unction getcookievalue(sname){
var svalue="";
var sname=sname+"=";
if(document.cookie.length>0){
offset=document.cookie.indexOf(sname);
if(offset!=-1){
offset+=sname.length;
end=document.cookie.indexOf(";",offset);
if(end==-1)end=document.cookie.length;
svalue=unescape(document.cookie.substring(offset,end))
}
}
return svalue;
}

function setcookievalue(sname,svalue){
var expire="";
expire=new Date((new Date()).getTime()[phone]);
expire="; expires="+expire.toGMTString();
document.cookie=sname+"="+escape(svalue)+expire;
}

[ymf1223]

哪位高人，知道这个怎么操作啊？小弟在线等，并拜谢了。

[ymf1223]

小弟今天向大侠们讨教方法了

[yangmeifu]

学习