利用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 相关文章推荐
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
Dec 03 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
Dec 02 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
vue的keep-alive用法技巧
Aug 15 Javascript
微信小程序sessionid不一致问题解决
Aug 30 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 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
如何使用脚本模仿登陆过程
2006/11/22 PHP
php学习笔记之面向对象编程
2012/12/29 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
JavaScript的继承的封装介绍
2013/10/15 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
Vue精简版风格概述
2018/01/30 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
python实现文本去重且不打乱原本顺序
2016/01/26 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
python连接打印机实现打印文档、图片、pdf文件等功能
2020/02/07 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
Python基于内置函数type创建新类型
2020/10/22 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
ASP.NET Core中的配置详解
2021/02/05 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
JRE、JDK、JVM之间的关系怎样
2012/05/16 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
办公室主任职责范文
2013/11/08 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书