JavaScript implementation-like Google div Drag effect code _javascript tips

Copy Code code as follows:

JScript files:
Detection browser MSIE Firefox
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;
})();
Get objects by ID
function $E _id (idstring)
{
return document.getElementById (idstring);
}
Getting objects by name
function $Es _tag (tagName)
{
Return document.getElementsByTagName (TagName);
}
Get Object Absolute Position obj.offsetparent
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;
}
The mouse clicks the object to send the event accurately
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";
for (Var m=0;m< $E _id ("root"). rows.length;m++)
{
var rootcells= $E _id ("root"). Rows[m].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
}
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;
}
}
asp.net file:
<%@ Page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "_default"%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>div Drag </title>
<style type= "Text/css" >
<!--
. dragheader
{
Background-color: #e5eef9;
border-top:1px solid #0066FF;
height:20px;
Cursor:move;
Font-weight:bold;
}
Body
{
Font-family:arial, Helvetica, Sans-serif;
font-size:12px;
}
#root TD
{
Vertical-align:top;
border:1px dotted #666666;
}
#tmpdiv
{
Position:absolute;
}
. dragdiv
{
}
. style1
{
Color: #FFFFFF;
Font-weight:bold;
font-size:36px;
}
-->
</style>
<script type= "Text/javascript" src= "Divdrag.js" ></script>
<body onmousedown= "Init (event)" onmouseup= "End ()" Onmousemove= "Move (event)" >
<script language= "javascript" type= "Text/javascript" >
document.write ("<div id= ' Tmpdiv ' ><\/div>");
</script>
<table id= "root" style= "width:600px;height:300px" cellpadding= "0" cellspacing= "1" >
<tr style= "height:150px;width:600px" >
&LT;TD style= "width:200px; height:50px; " >
<div class= "Dragdiv" id= "Div1" >
<table style= "height:100%;width:100%" border = "0" >
<tr>
<td>
<input id= "Button1" type= "button" value= "button"/>
Removable div1<br>
Click to start dragging!
</td>
</tr>
</table>
</div>
</td>
&LT;TD style= "width:200px; height:50px; " >
<div class= "Dragdiv" id= "Div2"
<table style= "height:100%;width:100%" border = "0" >
<tr>
<td>
<input id= "Button2" type= "button" value= "button"/>
Removable div2<br>
Click to start dragging!
</td>
</tr>
</table>
</div>
</td>
&LT;TD style= "width:200px; height:50px; " >
<div class= "Dragdiv" id= "Div3"
<table style= "height:100%;width:100%" border = "0" >
<tr>
<td>
<input id= "Button3" type= "button" value= "button"/>
Removable div3<br>
Click to start dragging!
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr style= "height:150px;width:600px" >
&LT;TD style= "width:200px; height:50px; " >
</td>
&LT;TD style= "width:200px; height:50px; " >
</td>
&LT;TD style= "width:200px; height:50px; " >
</td>
</tr>
<tr style= "height:150px;width:600px" >
&LT;TD style= "width:200px; height:50px; " >
</td>
&LT;TD style= "width:200px; height:50px; " >
</td>
&LT;TD style= "width:200px; height:50px; " >
</td>
</tr>
</table>
</body>