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


Posted in Javascript onAugust 09, 2011
JScript 文件: 
//检测浏览器 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; 
})(); 
//通过ID获得对象 
function $E_ID(idString) 
{ 
return document.getElementById(idString); 
} 
//通过Name获得对象 
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文件: 
<%@ 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>
Javascript 相关文章推荐
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
原生js写的放大镜效果
Aug 22 Javascript
javascript数组详解
Oct 22 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
AngularJs 延时器、计时器实例代码
Sep 16 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
jqGrid表格底部汇总、合计行footerrow处理
Aug 21 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 #Javascript
JQuery动态创建DOM、表单元素的实现代码
Aug 09 #Javascript
用JS判断IE版本的代码 超管用!
Aug 09 #Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 #Javascript
js 分页全选或反选标识实现代码
Aug 09 #Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 #Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 #Javascript
You might like
php xml实例 留言本
2009/03/20 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
php中cookie实现二级域名可访问操作的方法
2014/11/11 PHP
PHP可变变量学习小结
2015/11/29 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
实例说明为什么不要行内使用javascript
2014/04/18 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
基于jQuery实现返回顶部实例代码
2016/01/01 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
python3的print()函数的用法图文讲解
2019/07/16 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
教师求职信范文
2014/05/24 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
2014年外联部工作总结
2014/11/17 职场文书
撤诉申请怎么写
2015/05/19 职场文书
民事诉讼代理词
2015/05/25 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
使用numpy nonzero 找出非0元素
2021/05/14 Python