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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
jQuery ajax调用WCF服务实例
Jul 16 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
Sep 30 Javascript
vue自动路由-单页面项目(非build时构建)
Apr 30 Javascript
vue cli3适配所有端方案的实现
Apr 13 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获取远程文件大小
2015/10/20 PHP
php自定义时间转换函数示例
2016/12/07 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
NodeJs实现定时任务的示例代码
2017/12/05 NodeJs
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
档案管理员岗位职责
2013/12/01 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
食品安全检查制度
2014/02/03 职场文书
党代会心得体会
2014/09/04 职场文书
小学四年级学生评语
2014/12/26 职场文书
个人自荐书怎么写
2015/03/26 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android