利用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 相关文章推荐
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
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
浅析php与数据库代码开发规范
2013/08/08 PHP
PHP函数getenv简介和使用实例
2014/05/12 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
详解json在php中的应用
2018/09/30 PHP
javascript document.referrer 用法
2009/04/30 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
判断多个input type=file是否有已经选择好文件的代码
2012/05/23 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
对python 调用类属性的方法详解
2019/07/02 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
Python hashlib常见摘要算法详解
2020/01/13 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
scrapy-splash简单使用详解
2021/02/21 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
UML设计模式笔试题
2014/06/07 面试题
毕业生自荐信的主要内容
2013/10/29 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
感谢信模板大全
2015/01/23 职场文书
会计求职自荐信范文
2015/03/04 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
跑吧孩子观后感
2015/06/10 职场文书
高中美术教学反思
2016/02/17 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记