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

复制代码 代码如下:

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>

时间: 2024-09-29 00:25:24

Javascript实现的类似Google的Div拖动效果代码_javascript技巧的相关文章

js实现一个可以兼容PC端和移动端的div拖动效果实例_javascript技巧

前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouseup在移动端都不起任何作用.毕竟移动端是没有鼠标的,查资料后发现,在移动端与之相对应的分别是:touchstart.touchmove.touchend事件.还有一点要注意的是在PC端获取当前鼠标的坐标是:event.clientX和event.clientY,在移动端获取坐标位置则是:event.

javascript支持firefox,ie7页面布局拖拽效果代码_javascript技巧

javascript 拖拽JavaScript Google IG Drag Demo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖 动 拖拽效果的页面效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag.htm加强版效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag2.htm拖拽原理: 关于拖拽的基础,可以参考这篇文章,讲得非常不错. 其实原理很简单,就是

javascript实现简单的鼠标拖动效果实例_javascript技巧

本文实例讲述了javascript实现简单的鼠标拖动效果.分享给大家供大家参考.具体分析如下: 用鼠标拖动一个元素,放到网页的任意一个位置上,这是很常见的,例如很多博客模板版块位置可以自己拖动到相应位置. 下面先写一个简单的可以实现鼠标拖动的效果. 当鼠标按下的时候,记录鼠标当前位置和元素左边距离的差值. 当鼠标移动的时候,给元素的位置赋值,就是鼠标的位置,减去刚才的差值. 当鼠标放开的时候,给鼠标移动和鼠标放开赋值null,让它们不要再有任何动作. 要点一: disx = oevent.cli

js实现类似菜单风格的TAB选项卡效果代码_javascript技巧

本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再次美化这上选项卡,风格有点类似于菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-menu-style-tab-nav-codes/ 具体代码如下: <html xmlns="ht

JS实现无限级网页折叠菜单(类似树形菜单)效果代码_javascript技巧

本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码.分享给大家供大家参考.具体如下: 这是一款超不错的网页折叠菜单,采用JavaScript实现.折叠菜单是大家比较常见到的一种菜单形式,可广泛应用于管理系统.后台左侧.产品列表中,本折叠菜单有点树形菜单的味道,相信"无限级"会满足你的要求. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-fade-in-out-tree-menu-codes/ 具体代

javaScript实现可缩放的显示区效果代码_javascript技巧

本文实例讲述了javaScript实现可缩放的显示区效果代码.分享给大家供大家参考,具体如下: 这里演示可缩放的显示区,采用JS代码实现,鼠标按住区域的右下角,出现拖放箭头时,向下或向上拉,就可实现缩放操作,当区域较小时显示滚动条,平时也比较常见的效果,在此将JavaScript代码与大家分享. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ksf-box-style-demo/ 具体代码如下: <HTML> <HEAD>

文字溢出实现溢出的部分再放入一个新生成的div中具体代码_javascript技巧

看到群里有人提了一个问题,说文字溢出,如何实现溢出的文字放入一个新生成的div中, 想了一下原理,就是判断是否能在div里放下,如果不能,则在应该断开的地方,差入到新的div中,代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

js+div实现文字滚动和图片切换效果代码_javascript技巧

本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes

JavaScript实现上下浮动的窗口效果代码_javascript技巧

本文实例讲述了JavaScript实现上下浮动的窗口效果代码.分享给大家供大家参考.具体如下: 这里介绍使用JavaScript实现上下浮动的窗口,在垂直方向上漂浮,代码内的JS函数有超丰富的浮动层定义功能,像浮动层位置高度.初始化事件触发器.设定浮动层为可见,用style.left设定浮动层左边距.浮动层的运动速度等,还有更多的设置选项都能实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-up-down-float-move-win