利用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注册事件的常用方法
Apr 03 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
jQuery中click事件的定义和用法
Dec 20 Javascript
纯javascript响应式树形菜单效果
Nov 10 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
全面解析Node.js 8 重要功能和修复
Jun 02 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
详解TypeScript的基础类型
Feb 18 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
php 动态多文件上传
2009/01/18 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
jquery validate demo 基础
2015/10/29 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
javascript动画之磁性吸附效果篇
2016/12/09 Javascript
微信小程序之数据双向绑定与数据操作
2017/05/12 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
2020/12/17 Vue.js
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
大学生标准自荐书
2014/06/15 职场文书
公司授权委托书样本
2014/09/15 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
关于军训的感想
2015/08/07 职场文书
python基础入门之普通操作与函数(三)
2021/06/13 Python
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers