GOOGLE的个性化主页

GOOGLE的个性化主页拖搁功能秘密

[ 2006-11-07 16:26:39 | 作者: moloeven ]

字体大小: 大 | 中 | 小

很多人看到GOOGLE的个性化主页拖搁功能的实现方法可以借鉴，
他的方法是用Jscript实现，不包含记忆功能，没有数据交换。
我现在共享出来。

具体实现方法

CSS代码

<style>
.dragTable{

 border-top:1px solid #3366cc;

 margin-bottom: 10px;

 width:100%;

 background-color:#FFFFFF;

}

td{vertical-align:top; }

.dragTR{

 cursor:move;

 color:#7787cc;
 text-decoration:underline;

 background-color:#e5eef9;
 padding:10px 0 10px 5px;

 font-weight:bold;

}

#parentTable{

 border-collapse:collapse;

 letter-spacing:25px;

}

</style>

Jscript代码

<script defer language="jscript">

 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;

},

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].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;'>&lt;$2&gt;</span><br />");

 str=str.replace(//r/g,"<br />/n");

 d.write(str);

}

</script>

HTML代码

<table border="0" cellpadding="0" cellspacing="10" width="100%" id="parentTable">
 <tr>
 <td width="25%">
 <table border=0 class="dragTable" cellspacing="0">
 <tr>
 <td><b>传说中的标题</b></td>
 </tr>
 <tr>
 <td>我什么也没看见</td>
 <tr>
 </table>
 </td>
 <td width="25%">
 <table border=0 class="dragTable" cellspacing="0">
 <tr>
 <td><b>传说中的标题</b></td>
 </tr>
 <tr>
 <td>我什么也没看见</td>
 <tr>
 </table>
 </td>
 <td width="25%">
 <table border=0 class="dragTable" cellspacing="0">
 <tr>
 <td><b>传说中的标题</b></td>
 </tr>
 <tr>
 <td>我什么也没看见</td>
 <tr>
 </table>
 </td>
</tr>
</table>

完！
查看效果 ： http://www.moloweb.com/google%5Fa