AJAX入门必读与实例（仿google的拖动）[Code]

来源：互联网发布：炫酷网站首页源码编辑：程序博客网时间：2024/05/01 21:10

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">

</style>
<script language="javascript">
var ie=false,moz=false;
(function(){//check the browser
var userAgent=navigator.userAgent;
if(userAgent.indexOf("MSIE")!=-1)
ie=true;
else if(userAgent.indexOf("Firefox")!=-1)
moz=true;
})();
function $E_ID(idString){return document.getElementById(idString);}
function $Es_Tag(tagName){return document.getElementsByTagName(tagName);}
function $GetInfo(o){
var to=new Object();
to.left=to.right=to.top=to.bottom=0;
var twidth=o.offsetWidth;
var theight=o.offsetHeight;
while(o){
to.left+=o.offsetLeft;
to.top+=o.offsetTop;
o=o.offsetParent;
}
to.right=to.left+twidth;
to.bottom=to.top+theight;
return to;
}
function $hitTest(obj,event){
obj=$GetInfo(obj);
var x=event.clientX;
var y=event.clientY;
if((x>=obj.left&&x<=obj.right)&&(y>=obj.top&&y<=obj.bottom))return true;
else return false;

}
function Drag(event){
this.dragged=false;
this.ao=null;
this.tdiv=null;
this.fixLeft=0;
this.fixTop=0;
this.lastX=event.clientX;
this.lastY=event.clientY;
Drag.mm=null;
this.dragStart=function(event){
this.ao=ie?event.srcElement:(moz?event.target:null);
if(ie)document.body.onselectstart=function(){return false}
if(moz&&this.ao.nodeType==3)this.ao=this.ao.parentNode;
if(this.ao.tagName=="TD"||this.ao.tagName=="TR")this.ao=this.ao.offsetParent.parentNode;
else return;
if(this.ao.className!="dragdiv")return;
this.tdiv=$E_ID("tmpdiv");
this.tdiv.style.visibility="visible";
this.tdiv.style.filter="alpha(opacity=70)";
if(ie)this.tdiv.filters.alpha.opacity=70;
this.tdiv.style.opacity=0.7;
this.tdiv.style.zIndex=100;
this.tdiv.innerHTML=this.ao.innerHTML;
this.tdiv.style.width=this.ao.offsetWidth+"px";
this.tdiv.style.height=this.ao.offsetHeight+"px";
this.tdiv.style.top=$GetInfo(this.ao).top+"px";
this.tdiv.style.left=$GetInfo(this.ao).left+"px";
this.fixTop=parseInt($GetInfo(this.tdiv).top);
this.fixLeft=parseInt($GetInfo(this.tdiv).left);
this.dragged=true;

}
this.onDrag=function(event){
if((!this.dragged)||this.ao==null)return;
var tX=event.clientX;
var tY=event.clientY;
this.tdiv.style.left=parseInt(this.fixLeft+tX-this.lastX-document.body.scrollLeft)+"px";
this.tdiv.style.top=parseInt(this.fixTop+tY-this.lastY-document.body.scrollTop)+"px";
var rootCells=$E_ID("root").rows[0].cells;
for(var i=0;i<rootCells.length;i++){
if($hitTest(rootCells[i],event)){
if(rootCells[i].hasChildNodes()){
for(var j=0;j<rootCells[i].childNodes.length;j++){
if($hitTest(rootCells[i].childNodes[j],event)){
rootCells[i].insertBefore(this.ao,rootCells[i].childNodes[j]);
break;
}
}
if(j==rootCells[i].childNodes.length){
rootCells[i].appendChild(this.ao);break;
}
break;
}else{
rootCells[i].appendChild(this.ao);
break;
}
}
}
}
this.dragEnd=function(){
if(this.dragged){
this.dragged=false;
Drag.mm=this.repos(150,15,this);
this.ao=null;
}
if(ie)document.body.onselectstart=function(){return true}
}
this.repos=function(aa,ab,obj){
if(ie)var f=obj.tdiv.filters.alpha.opacity;
else if(moz)var f=obj.tdiv.style.opacity*100;
var kf=f/ab;
var tl=parseInt($GetInfo(obj.tdiv).left);
var tt=parseInt($GetInfo(obj.tdiv).top);
var kl=(tl-$GetInfo(obj.ao).left)/ab;
var kt=(tt-$GetInfo(obj.ao).top)/ab;
return setInterval(function(){if(ab<1){
clearInterval(Drag.mm);
obj.tdiv.style.visibility="hidden";
obj.tdiv.style.zIndex="";
return;
}
ab--;
tl-=kl;
tt-=kt;
f-=kf;
obj.tdiv.style.left=parseInt(tl)+"px";
obj.tdiv.style.top=parseInt(tt)+"px";
if(ie)obj.tdiv.filters.alpha.opacity=f;
else if(moz)obj.tdiv.style.opacity=f/100;
},aa/ab);
}
}
var tDrag=null;
function init(event){
//alert(event.target.innerHTML);
tDrag=new Drag(event);
tDrag.dragStart(event);
}
function move(event){
if(tDrag!=null)tDrag.onDrag(event);
}
function end(){
if(tDrag!=null){
tDrag.dragEnd();
tDrag=null;
}
}
</script>
</head>

<body onMouseDown="init(event)" onMouseUp="end()" onMouseMove="move(event)">
<script language="javascript">
document.write("<div id='tmpdiv'><//div>");
</script>
<table width="100%" height="411" border="0" cellpadding="1" cellspacing="1" bgcolor="#FF0000" id="root">
<tr bgcolor="#FFFFFF">
<td width="25%"><div class="dragdiv" id="div1">
<table width="100%" border="0" cellspacing="1">
<tr>
<td height="20" class="dragHeader"> 类似与google个性页面的好东东 </td>
</tr>
<tr>
<td height="200" bgcolor="#99CC00"><span class="style1"><a href="#" onClick="javascript:alert($hitTest($E_ID('div1'),event));">1</a></span></td>
</tr>
</table>
</div></td>
<td width="25%"><div class="dragdiv" id="div2">
<table width="100%" border="0" cellspacing="1">
<tr>
<td height="20" class="dragHeader"> 类似与google个性页面的好东东 </td>
</tr>
<tr>
<td height="123" bgcolor="#00FF00" class="style1"><a href="#" onClick="javascript:alert($hitTest($E_ID('div2'),event));">2</a></td>
</tr>
</table>
</div>
<div class="dragdiv" id="div3">
<table width="100%" border="0" cellspacing="1">
<tr>
<td height="20" class="dragHeader"> 类似与google个性页面的好东东 </td>
</tr>
<tr>
<td height="123" bgcolor="#006600" class="style1"><a href="#" onClick="javascript:alert($hitTest($E_ID('div3'),event));">3</a></td>
</tr>
</table>
</div>
<div class="dragdiv" id="div4">
<table width="100%" border="0" cellspacing="1">
<tr>
<td height="20" class="dragHeader"> 类似与google个性页面的好东东 </td>
</tr>
<tr>
<td height="123" bgcolor="#990000" class="style1"><a href="#" onClick="javascript:alert($hitTest($E_ID('div4'),event));">4</a></td>
</tr>
</table>
</div>
<div class="dragdiv" id="div5">
<table width="100%" border="0" cellspacing="1">
<tr>
<td height="20" class="dragHeader"> 类似与google个性页面的好东东 </td>
</tr>
<tr>
<td height="123" bgcolor="#3366FF" class="style1"><a href="#" onClick="javascript:alert($hitTest($E_ID('div5'),event));">5</a></td>
</tr>
</table>
</div></td>
<td width="25%">
<div class="dragdiv" id="div6">
<table width="100%" border="0" cellspacing="1">
<tr>
<td height="20" class="dragHeader"> 类似与google个性页面的好东东 </td>
</tr>
<tr>
<td height="123" bgcolor="#FF33FF" class="style1"><a href="#" onClick="javascript:alert($hitTest($E_ID('div6'),event));">6</a></td>
</tr>
</table>
</div></td>
<td width="25%"><div class="dragdiv" id="div7">
<table width="100%" border="0" cellspacing="1">
<tr>
<td height="20" class="dragHeader"> 类似与google个性页面的好东东 </td>
</tr>
<tr>
<td height="123" bgcolor="#66CC99" class="style1"><a href="#" onClick="javascript:alert($hitTest($E_ID('div7'),event));">7</a></td>
</tr>
</table>
</div></td>
</tr>
</table>
</body>
</html>