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