Google 个性化主页类似，如何保存最后的布局三

 

Google 个性化主页类似，如何保存最后的布局三

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 blue";
                                        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;
                                }// end function dragStart()
                                ,
                                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                                                var parentCell = Drag.getInfo(parentTable.cells[i]);
                                                if(tX >=  parentCell.left  &&
                                                   tX                                                    tY >=  parentCell.top   &&
                                                   tY                                                         var subTables = parentTable.cells[i].getElementsByTagName("table");
                                                        if(subTables.length == 0){
                                                                if(tX >=  parentCell.left  &&
                                                                   tX                                                                    tY >=  parentCell.top   &&
                                                                   tY                                                                                 parentTable.cells[i].appendChild(Drag.ao);
                                                                }
                                                                break;
                                                        }
                                                        for(var j = 0; j                                                                var subTable = Drag.getInfo(subTables[j]);
                                                                if(tX >=  subTable.left  &&
                                                                   tX                                                                    tY >=  subTable.top   &&
                                                                   tY                                                                         parentTable.cells[i].insertBefore(Drag.ao,subTables[j]);
                                                                        break;
                                                                }else{
                                                                        parentTable.cells[i].appendChild(Drag.ao);
                                                                }
                                                   }
                                                }
                                        }
                                }// end function draging
                                ,
                                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;
                                        //alert(Drag.ao.outerHTML);
                                        Drag.saveLayout();
                                        displaySaveLayout();
                                }// end function dragEnd()
                                ,
                                saveLayout:function()
                                {        // 把当前布局的位置放到 Cookie 里,按过 "保存页面布局" 后,存到后台
                                        for(var i = 0;i                                                var subTables = parentTable.cells[i].getElementsByTagName("table");
                                                for(var j = 0;j                                                        if(subTables[j].className !=  "dragTable") break;
                                                        // i_cell index of parentTable
                                                        // j_node index of parentTable.rows[0][i].childNodes
                                                        setCookie(subTables[j].id+"pos",i+"::"+j+"::"+subTables[j].id);
                                                }
                                        }
                                }// end function saveLayout()
                                ,
                                initTablePos:function()
                                {
                                        // 先从 Cookie 里得到值, 如果得不到再到 DB 中挑资料.
                                        var _tablepos = new Array();
                                        var _dragTableHtmlArray = new Array(); // 存放 drag table 里的 html 代码
                                        var _cookies = new Array();
                                        var _c = 0;
                                        // 先把画面上的内容拿到 Javascript 然后重新布局
                                        for(var i = 0;i                                                var subTables = parentTable.cells[i].getElementsByTagName("table");
                                                for(var j = 0;j                                                        if(subTables[j].className !=  "dragTable") break;
                                                        _cookies[_c] = getCookie(subTables[j].id+"pos");
                                                        _dragTableHtmlArray[subTables[j].id] = subTables[j].outerHTML;
                                                        _c++;
                                                }
                                               
                                                if (_cookies.toString().indexOf("::") != -1)
                                                {
                                                        parentTable.cells[i].innerHTML = ""; // 清除画面上拖动 Table
                                                }
                                               
                                        }
                                        _cookies.sort(); // sort 后按顺序加入 innerHTML
                                        if (_cookies.toString().indexOf("::") != -1)
                                        {                                       
                                                for (var _k = 0 ; _k <_cookies.length>                                                {
                                                        if (_cookies[_k] != null)
                                                        {
                                                                _tablepos = _cookies[_k].split("::");
                                                                //alert(_tablepos);
                                                                if (typeof(_tablepos) == "object")
                                                                {
                                                                        //alert(_dragTableHtmlArray[_tablepos[2]]);
                                                                        parentTable.cells[_tablepos[0]].innerHTML += _dragTableHtmlArray[_tablepos[2]];
                                                                        //parentTable.cells[_tablepos[0]].innerText += _dragTableHtmlArray[_tablepos[2]];
                                                                }
                                                        }                                               
                                                }
                                        }
                                        //_cookies.sort();
                                        //alert(_cookies);
                                        _dragTableHtmlArray = null;// release memoery
                                }// end function initDragTablePos()
                                ,
                                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;
                                }// end function getInfo()
                                ,
                                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                                                                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;
                                                }// end 动画效果
                                                ,aa/ab)
                                }// end function repos()
                                ,
                                inint:function(){//初始化
                                        Drag.initTablePos();
                                        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].rows[0].className = "dragTR";
                                                        subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart);
                                                }
                                        }
                                       
                                        document.onmousemove = Drag.draging;
                                        document.onmouseup = Drag.dragEnd;
                                }// end function inint()
                }//end of Object Drag

                Drag.inint();