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;ivar 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; jvar 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;ivar subTables = parentTable.cells[i].getElementsByTagName("table");for(var j = 0;jif(subTables[j].className != "dragTable") break;// i_cell index of parentTable// j_node index of parentTable.rows[0][i].childNodessetCookie(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;ivar subTables = parentTable.cells[i].getElementsByTagName("table");for(var j = 0;jif(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 后按顺序加入 innerHTMLif (_cookies.toString().indexOf("::") != -1){for (var _k = 0 ; _k{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;ivar subTables = parentTable.cells[i].getElementsByTagName("table");for(var j = 0;jif(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 DragDrag.inint();
Google 个性化主页类似，如何保存最后的布局三
•
👁 0人浏览过