Google 个性化主页类似，如何保存最后的布局一 <br />*{<br /> padding:0;margin:0<br />}<br /><br />.dragTable{<br /> margin-top: 10px;<br /> width:100%;<br /> background-color:#fff;<br />}<br />td{<br /> vertical-align:top; <br />}<br /><br />.dragTR{<br /> cursor:move; <br /> font-weight:bold;<br /> background-color:#6993bC;<br /> background-image: url(../bis/img/tleftbg.gif);<br /> background-position: left top;<br /> background-repeat:no-repeat;<br /> color:#FFFFFF;<br /> height:20px;<br />}<br />input{<br /> cursor:hand;<br />}<br />#parentTable{<br /> border-collapse:collapse;<br /> margin: 0 0 0 10;<br /> /*letter-spacing:25px;*/<br />}<br /> <br /> var Drag={<br /> dragged:false,<br /> ao:null,<br /> tdiv:null,<br /> dragStart:function(){<br /> Drag.ao=event.srcElement;<br /> if((Drag.ao.tagName=="TD")||(Drag.ao.tagName=="TR")){<br /> Drag.ao=Drag.ao.offsetParent;<br /> Drag.ao.style.zIndex=100;<br /> }else{<br /> return;<br /> }<br /> Drag.dragged=true;<br /> Drag.tdiv=document.createElement("div");<br /> Drag.tdiv.innerHTML=Drag.ao.outerHTML;<br /> Drag.ao.style.border="1px dashed red";<br /> Drag.tdiv.style.display="block";<br /> Drag.tdiv.style.position="absolute";<br /> Drag.tdiv.style.filter="alpha(opacity=70)";<br /> Drag.tdiv.style.cursor="move";<br /> Drag.tdiv.style.border="1px solid #000000";<br /> Drag.tdiv.style.width=Drag.ao.offsetWidth;<br /> Drag.tdiv.style.height=Drag.ao.offsetHeight;<br /> Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top;<br /> Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left;<br /> document.body.appendChild(Drag.tdiv);<br /> Drag.lastX=event.clientX;<br /> Drag.lastY=event.clientY;<br /> Drag.lastLeft=Drag.tdiv.style.left;<br /> Drag.lastTop=Drag.tdiv.style.top;<br /> },<br /> draging:function(){//重要:判断MOUSE的位置<br /><br /> if(!Drag.dragged||Drag.ao==null) return;<br /> var tX=event.clientX;<br /> var tY=event.clientY;<br /> Drag.tdiv.style.left=parseInt(Drag.lastLeft)+tX-Drag.lastX;<br /> Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY;<br /> for(var i=0;i<parentTable.cells.length;i++){<br /> var parentCell=Drag.getInfo(parentTable.cells[i]);<br /> if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){<br /> var subTables=parentTable.cells[i].getElementsByTagName("table");<br /> if(subTables.length==0){<br /> if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){<br /> parentTable.cells[i].appendChild(Drag.ao);<br /> }<br /> break;<br /> }<br /> for(var j=0; j<subTables.length; j++){<br /> var subTable=Drag.getInfo(subTables[j]);<br /> if(tX>=subTable.left&&tX<=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){<br /> parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);<br /> break;<br /> }else{<br /> parentTable.cells[i].appendChild(Drag.ao);<br /> } <br /> }<br /> }<br /> }<br /> },<br /> dragEnd:function(){<br /> if(!Drag.dragged) return;<br /> Drag.dragged=false;<br /> Drag.mm=Drag.repos(150,15);<br /> Drag.ao.style.borderWidth="0px";<br /> //Drag.ao.style.borderTop="1px solid #3366cc";<br /> Drag.tdiv.style.borderWidth="0px";<br /> Drag.ao.style.zIndex=1;<br /> setCookie(Drag.ao.id+"top",Drag.getInfo(Drag.ao).top);<br /> setCookie(Drag.ao.id+"left",Drag.getInfo(Drag.ao).left);<br /> displaySaveLayout();<br /> },<br /> getInfo:function(o){//取得坐标<br /> var to=new Object();<br /> to.left=to.right=to.top=to.bottom=0;<br /> var twidth=o.offsetWidth;<br /> var theight=o.offsetHeight;<br /> while(o!=document.body){<br /> to.left+=o.offsetLeft;<br /> to.top+=o.offsetTop;<br /> o=o.offsetParent;<br /> }<br /> to.right=to.left+twidth;<br /> to.bottom=to.top+theight;<br /> return to;<br /> },<br /> repos:function(aa,ab){<br /> var f=Drag.tdiv.filters.alpha.opacity;<br /> var tl=parseInt(Drag.getInfo(Drag.tdiv).left);<br /> var tt=parseInt(Drag.getInfo(Drag.tdiv).top);<br /> var kl=(tl-Drag.getInfo(Drag.ao).left)/ab;<br /> var kt=(tt-Drag.getInfo(Drag.ao).top)/ab;<br /> var kf=f/ab;<br /> return setInterval(<br /> function(){<br /> if(ab<1){<br /> clearInterval(Drag.mm);<br /> Drag.tdiv.removeNode(true);<br /> Drag.ao=null;<br /> return;<br /> }<br /> ab--;<br /> tl-=kl;<br /> tt-=kt;<br /> f-=kf;<br /> Drag.tdiv.style.left=parseInt(tl)+"px";<br /> Drag.tdiv.style.top=parseInt(tt)+"px";<br /> Drag.tdiv.filters.alpha.opacity=f;<br /> }<br /> ,aa/ab)<br /> },<br /><br /> inint:function(){//初始化<br /><br /> for(var i=0;i<parentTable.cells.length;i++){<br /> var subTables=parentTable.cells[i].getElementsByTagName("table");<br /> for(var j=0;j<subTables.length;j++){<br /> if(subTables[j].className!="dragTable") break;<br /> //subTables[j].style.position = "absolute";<br /> //subTables[j].style.left = getCookie(subTables[j].id+"left");<br /> //subTables[j].style.top = getCookie(subTables[j].id+"top");<br /> //subTables[j].style.position = "relative";<br /> subTables[j].rows[0].className="dragTR";<br /> subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);<br /> }<br /> }<br /> document.onmousemove=Drag.draging;<br /> document.onmouseup=Drag.dragEnd;<br /> }<br /> }//end of Object Drag<br /><br /> Drag.inint();<br /> /*<br /> function _show(str){<br /> var w=window.open('','');<br /> var d=w.document;<br /> d.open();<br /> str=str.replace(/=(?!")(.*?)(?!")( |>)/g,"="$1"$2");<br /> str=str.replace(/(<)(.*?)(>)/g,"<span style='color:red;'><$2><br />");<br /> str=str.replace(/r/g,"<br />n");<br /> d.write(str);<br /> }<br /> */<br /> function collapseExpand()<br /> {<br /> var imgObj = event.srcElement;<br /> var contab = imgObj.parentElement.parentElement.parentElement.parentElement;<br /><br /> if (imgObj.type == "image" && contab.className == "dragTable")<br /> {<br /> var icon1 = "hide";<br /> var icon2 = "show";<br /> var displaycss = "block";<br /> if (imgObj.src.indexOf("hide") > -1)<br /> {<br /> icon1 = "hide";<br /> icon2 = "show";<br /> displaycss = "none";<br /> }else{<br /> icon1 = "show";<br /> icon2 = "hide";<br /> displaycss = "block";<br /> }<br /> for (var i=1; i<contab.rows.length; i++ )<br /> {<br /> contab.rows(i).style.display = displaycss;<br /> }<br /> imgObj.src = imgObj.src.replace(icon1,icon2);<br /> }else{<br /> return;<br /> }<br /> }// end function collaps()<br /> function GetLayout()<br /> {<br /> var _tab = new Array("kpis","favorite","4graph","1graph");<br /> for (var i=0; i<4; i++ )<br /> {<br /> alert(_tab[i]+"left:-> "+getCookie(_tab[i]+"left")+"n"+_tab[i]+"top:-> "+getCookie(_tab[i]+"top"))<br /> }<br /> }// end function GetLayout()<br /> function setCookie(cookieName,cookieValue,nDays) {<br /> var today = new Date();<br /> var expire = new Date();<br /> if (nDays==null || nDays==0) nDays=1;<br /> //expire.setTime(today.getTime() + 3600000*24*nDays);<br /> expire.setTime(today.getTime());<br /> document.cookie = cookieName+"="+escape(cookieValue);//+ ";expires="+expire.toGMTString();<br /> //document.cookie = cookieName+"="+escape(cookieValue)+ ";expires="+expire.toGMTString();<br /> }<br /> function displaySaveLayout()<br /> {<br /> var sl = document.getElementById("savelayout");<br /> if (sl.style.display == "none")<br /> {<br /> sl.style.display = "block";<br /> }<br /> }// end function displaySaveLayout()<br /> function saveLayout()<br /> {<br /> var sl = document.getElementById("savelayout");<br /> if (sl.style.display == "block")<br /> {<br /> sl.style.display = "none";<br /> //sl.innerText = "页面布局保存成功.";<br /> window.status = "页面布局保存成功.";<br /> }<br /> var tables = document.getElementsByTagName("table");<br /> for (var i=0; tables.length; i++)<br /> {<br /> try <br /> {<br /> if (tables[i].id != "parentTable" && typeof(tables[i].id) != "undefined" && tables[i].id )<br /> {<br /> //alert(tables[i].id+":nleft->"+getCookie(tables[i].id+"left")+"tt top:"+getCookie(tables[i].id+"top"));<br /> alert(tables[i].id+" left:"+tables[i].style.pixLeft );<br /> <br /> }//<br /> }catch(e)<br /> {<br /> return;<br /> }<br /> }// end for loop<br /> }// end function saveLayout()<br /> http://www.bkjia.com/PHPjc/445135.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/445135.htmlTechArticleGoogle 个性化主页类似，如何保存最后的布局一 style type=text/css *{ padding:0;margin:0 } .dragTable{ margin-top: 10px; width:100%; background-color:#fff; } td{ ver...
