利用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操作xml
Nov 04 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
js jquery数组介绍
Jul 15 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
May 30 Javascript
js select实现省市区联动选择
Apr 17 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 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中ADODB类详解
2008/03/25 PHP
php日历制作代码分享
2014/01/20 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
JavaScript判断浏览器及其版本信息
2017/01/20 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
Python的Bottle框架的一些使用技巧介绍
2015/04/08 Python
简单介绍Python中的JSON使用
2015/04/28 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
Python I/O与进程的详细讲解
2019/03/08 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
面向对象编程OOP的优点
2013/01/22 面试题
装修五一活动策划案
2014/01/23 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis
app场景下uniapp的扫码记录
2022/07/23 Java/Android
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS