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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
Sort()函数的多种用法
Mar 20 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
解决JavaScript layui 下拉框不显示的问题
Aug 14 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
如何在VUE中使用vue-awesome-swiper
Jan 04 Vue.js
基于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学习之整理字符串
2011/04/17 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
2016/01/28 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
2017/08/24 jQuery
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
Python中的文件和目录操作实现代码
2011/03/13 Python
python网络编程之文件下载实例分析
2015/05/20 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
django实现用户注册实例讲解
2019/10/30 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
货代行业个人求职简历的自我评价
2013/10/22 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
安全生产标语
2014/06/06 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
2015年超市工作总结
2015/04/09 职场文书
初二英语教学反思
2016/02/15 职场文书
python 如何获取页面所有a标签下href的值
2021/05/06 Python
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript