利用javascript移动div层-javascript 拖动层


Posted in Javascript onMarch 22, 2009

利用javascript移动div层-javascript 拖动层:
程序功能:利用javascript开发在界面上随意拖动以下html code中的div层.
javascript移动div层-javascript 拖动层代码-
html code:

<div id="div_Info" style="display: none; dz-index: 101; left: 175px; width: 650px; 
position: absolute; top: 346px;" align="center"> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<%-- 以下td中添加了javascript代码移动层,拖动层的几个事件 
onmousedown事件当鼠标单击时发生 
onmousemove 事件会在鼠标指针移动时发生 
onmouseup 事件会在鼠标按键被松开时发生, 
onmouseout 事件会在鼠标指针移出指定的对象时发生--%> 
<td style="width: 628px; height: 22px; background-color: #3f3200;" class="div_table_bian" 
onmousedown="movetianyamessage(div_Info, event)" onmousemove="movetianyamessageend(event);" 
onmouseup="movetianyamessageend(event)" onmouseout="movetianyamessageend(event)"> 
</td> 
<td style="width: 22px; background-color: #221B00; font-size: 12px; color: #ffffff; 
height: 22px;" align="center" class="div_table_notLeft_bian" > 
<a href="javascript:disponseNone(div_Info)" style=" color:White;">x</a></td> 
</tr> 
<tr> 
<td colspan="2" style="background-color: #000000" align="center" valign="top" class="div_table_notTop_bian"> 
<table border="0" cellpadding="0" cellspacing="0" style="width: 90%"> 
<tr> 
<td style="height: 25px;"></td> 
</tr> 
<tr> 
<td style="height: 23px;" class="white12px" align="center"> 
<asp:Label ID="div_lblTitle" runat="server" Font-Size="16px"></asp:Label></td></tr> 
<tr><td style="height: 15px" valign="top"></td></tr> 
<tr><td id="Div_Td_Content" runat="server" class="white12px" valign="top"></td></tr> 
<tr><td runat="server" class="white12px" valign="top" style="height: 15px"></td></tr> 
<tr><td class="white12px" style="height: 40px" align="center" valign="middle"> 
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/returns.jpg" 
OnClientClick="disponse_div(div_Info);return false;" /></td></tr> 
</table> 
</td></tr> 
</table> 
</div>

javascript移动div层-javascript 拖动层代码-javascript code:
<script language="javascript"> 
// javascript文件 
/*调用方法 
//onmousedown="movetianyamessage(div_Info, event)" onmousemove="movetianyamessageend(event);" 
//onmouseup="movetianyamessageend(event)" onmouseout="movetianyamessageend(event)" 
//onmousedown=鼠标点下的时候 onmousemove=鼠标经过的时候 onmouseup=鼠标弹起来的时候 onmouseout=鼠标离开的时候 
*/ 
var tianyamessage = '' 
var iLayerMaxNum = 999; 
document.onmouseup = movetianyamessageend; 
document.onmousemove = movetianyamessagestart; 
var tianyamessagepixefX; 
var tianyamessagepixefY; 
function movetianyamessage(Object, event) 
{ 
tianyamessage = Object.id; 
if(document.all) 
{ 
document.getElementById(tianyamessage).setCapture(); 
tianyamessagepixefX = event.x - document.getElementById(tianyamessage).style.pixelLeft; 
tianyamessagepixefY = event.y - document.getElementById(tianyamessage).style.pixelTop; 
} 
else if(window.captureEvents) 
{ 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
tianyamessagepixefX = event.layerX; 
tianyamessagepixefY = event.layerY; 
} 
document.getElementById(tianyamessage).style.zIndex = iLayerMaxNum; 
iLayerMaxNum = iLayerMaxNum + 1; 
} 
function movetianyamessagestart(evt) 
{ 
if(tianyamessage!=''){ 
if(document.all) 
{ 
document.getElementById(tianyamessage).style.left = event.x - tianyamessagepixefX; 
document.getElementById(tianyamessage).style.top = event.y - tianyamessagepixefY; 
} 
else if(window.captureEvents) 
{ 
document.getElementById(tianyamessage).style.left = (evt.clientX - tianyamessagepixefX) + "px"; 
document.getElementById(tianyamessage).style.top = (evt.clientY - tianyamessagepixefY) + "px"; 
} 
} 
} 
function movetianyamessageend(evt) 
{ 
if(tianyamessage!='') 
{ 
if(document.all) 
{ 
document.getElementById(tianyamessage).releaseCapture(); 
tianyamessage=''; 
} 
else if(window.captureEvents){ 
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); 
tianyamessage=''; 
} 
} 
} 
function disponse_div(obj) 
{ 
if(obj.style.display=="block") 
{ 
obj.style.display="none"; 
} 
else 
{ 
obj.style.display="block"; 
} 
} 
</script>
Javascript 相关文章推荐
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
javascript 对象定义方法 简单易学
Mar 22 #Javascript
JS array 数组详解
Mar 22 #Javascript
javascript multibox 全选
Mar 22 #Javascript
Js 获取当前日期时间及其它操作实现代码
Mar 04 #Javascript
JavaScript 计算当天是本年本月的第几周
Mar 22 #Javascript
DWR Ext 加载数据
Mar 22 #Javascript
dwr spring的集成实现代码
Mar 22 #Javascript
You might like
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
实现PHP多线程异步请求的3种方法
2014/01/17 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
javascript string字符串优化问题
2011/07/31 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
react在安卓中输入框被手机键盘遮挡问题的解决方法
2018/09/03 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
layui实现左侧菜单点击右侧内容区显示
2019/07/26 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
python实现kMeans算法
2017/12/21 Python
Python+PIL实现支付宝AR红包
2018/02/09 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Python必须了解的35个关键词
2020/07/16 Python
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
酒店led欢迎词
2014/01/09 职场文书
计算机相关的自我评价
2014/01/15 职场文书
学习经验交流会主持词
2014/04/01 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
单位实习鉴定评语
2015/01/04 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
婚宴主持词
2015/06/30 职场文书
2015年科普工作总结
2015/07/23 职场文书
CSS3常见动画的实现方式
2021/04/14 HTML / CSS
sql时间段切分实现每隔x分钟出一份高速门架车流量
2022/02/28 SQL Server