Google パーソナライズドホームページも同様、最終レイアウトの保存方法_PHP チュートリアル

Google のパーソナライズされたホームページと同様に、最終レイアウトを保存する方法

<スクリプト遅延>        bar drag = {
dragged：false、
ao：null、
tdiv：null、
dragstart：function（）{
drag.ao = event.srcelement; )||(Drag.ao.tagName=="TR")){
Drag.ao=Drag.ao.offsetParent;
ドラッグします。 ao.style.zIndex=100;
}else{
return;
}
ドラッグ.dragged=true;
Drag.tdiv=document.createElement("div");
Drag.tdiv.innerHTML=Drag.ao.outerHTML;
Drag.ao.style.border="1px 破線の赤";
ドラッグします。 tdiv.style.display="block";
Drag.tdiv.style.position="absolute";
Drag.tdiv.style.filter="alpha(opacity=70)";
Drag.tdiv.style.cursor= "移動";
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;
},
raging:function(){//:重要判断MOUSEの位置

if(!Drag.ドラッグ||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 キーを押しながらドラッグします。 lastY;
for(var i=0;i varparentCell=Drag.getInfo(parentTable.cell s[i]);
if(tX>=parentCell.left&&tX<=parentCell. right && ty＆gt; = parentcell.top && ty＆lt; = parentcell.bottom）{
var subtables = parenttable.cells [i] .getelementsbytagname（ "table"）; left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){
parentTable.cells[i].appendChild (Drag.ao);
}
break;
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]);
}else{
parentTable.cells[i].appendChild(Drag.ao );
}
}
} }
}
},
ragEnd:function(){
if(!Drag.dragged) return;
Drag.dragged=false;
Drag.mm=Drag.repos(150,15);
Drag.ao.style.borderWidth=" 0px";
//Drag.ao.style.borderTop="1px ソリッド #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;
},
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){
Drag.tdiv.removeNode(true);
Drag.ao=null;
return;
ab--;
tl-=kl;
tt-= kt;
Drag.tdiv.style.left=par seInt(tl)+"px";
Drag.tdiv.filters .alpha.opacity=f;
}
,aa/ab)
},

inint:function(){//初化

for(var i=0;i var subTables=parentTable.cells[i].getElementsByTagName("table");
for(var j=0;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,"<$2>
");
                        str=str.replace(/r/g,"
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 = "非表示";
var icon2 = "表示";
var displaycss = "block";
if (imgObj.src.indexOf("hide") > -1)
{
icon1 = "隠す";
icon2 =" show ";
displaycss =" none "; ; i }
imgObj.src = imgObj.src.replace(icon1,icon2);
}その他{
return;
}
}// end functioncollapses()
function GetLayout()
{
var _tab = new Array("kpis","favorite","4graph","1graph");
for (var i= 0; i {
alter(_tab[i]+"left:-> "+getCookie(_tab[i]+"left")+"n"+_tab[i]+"top:->クッキー(_tab[i]+"top"))
}
}// end function GetLayout()
function setCookie(cookieName,cookieValue,nDays) {
var today = new Date();
var Expired = 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();
}
関数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 == "ブロック"）
{
sl.style.display =" none "; .getElementsByTagName("table");
for (var i=0;テーブルの長さ; i++)
{
試してみてください
{
if (tables[i].id != "parentTable" && typeof(tables[i].id) != "unknown" && 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）;

} //                                                                                                                                                                                                                         

www.bkjia.com