JavaScript实现类似Google的Div拖动效果代码

 
JavaScript 核心逻辑实现JScript 脚本文件内容：
// 检测浏览器类型：MSIE 或 Firefox
var ie=false,moz=false;
(function() {
// 检查浏览器标识
var userAgent=navigator.userAgent;
if(userAgent.indexOf("MSIE")!=-1)
ie=true;
else if(userAgent.indexOf("Firefox")!=-1)
moz=true;
})(); 
// 通过ID获取DOM对象
function $E_ID(idString) {
{ 
return document.getElementById(idString);
} 
// 通过标签名获取对象集合
function $Es_Tag(tagName) {
{ 
return document.getElementsByTagName(tagName);
} 
// 获取对象绝对坐标 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;
} 
// 鼠标点击对象触发事件检测
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;
} 
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 页面结构与样式配置Asp.net 文件内容：
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Div拖动</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>
</head>
<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">
<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" />
可移动DIV1<br>
点击即可开始拖动!
</td>
</tr>
</table>
</div>
</td>
<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" />
可移动DIV2<br>
点击即可开始拖动!
</td>
</tr>
</table>
</div>
</td>
<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" />
可移动DIV3<br>
点击即可开始拖动!
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr style="height:150px;width:600px">
<td style="width:200px; height: 50px;">
</td>
<td style="width:200px; height: 50px;">
</td>
<td style="width:200px; height: 50px;">
</td>
</tr>
<tr style="height:150px;width:600px">
<td style="width:200px; height: 50px;">
</td>
<td style="width:200px; height: 50px;">
</td>
<td style="width:200px; height: 50px;">
</td>
</tr>
</table>
</body>
</html>