首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > JAVA > Java Web开发 >

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

2012-01-07 
用ajax技术 或jsp+cookies技术保存个性网页模式到客户端,向高手们请教小弟做的网页布局可以拖动,我想在客

用ajax技术 或jsp+cookies技术保存个性网页模式到客户端,向高手们请教
小弟做的网页布局可以拖动,我想在客户端保存整个网页拖动后的布局,那该该怎么做呢?以下是可拖动的网页代码,就是实现不了在客户端保存拖动后的效果,有哪位大侠能够出手相助帮忙小弟弄一下,不甚感激。再此磕头拜谢了!
<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:hktx@163.com****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   相关报道   &raquo;哈马斯已有总理人选  
                                解放日报报业集团   -   所有   489   相关报道   &raquo;陈水扁是两岸关系麻烦制造者   武汉晨报   -   所有   179   相关报道   &raquo; </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 "   > &nbsp; </td>
                </tr>
        </table> </td>
    <tr>
</table> </td>
</tr>
</table>



[解决办法]
来接分~
[解决办法]
up
[解决办法]
学习

热点排行