利用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 jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
JavaScript取得WEB安全颜色列表的方法
Jul 14 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
javascript自动恢复文本框点击清除后的默认文本
Jan 12 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
Sep 20 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
Dec 05 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
微信小程序自定义底部弹出框功能
Nov 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 获取全局变量的代码
2011/04/21 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
PHP计算2点经纬度之间的距离代码
2013/08/12 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
wxPython 入门教程
2008/10/07 Python
python函数装饰器用法实例详解
2015/06/04 Python
实例解析Python中的__new__特殊方法
2016/06/02 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
详解supervisor使用教程
2017/11/21 Python
python模拟事件触发机制详解
2018/01/19 Python
Python中str.join()简单用法示例
2018/03/20 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
python如何快速拼接字符串
2020/10/28 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
大学生年度自我鉴定
2013/10/31 职场文书
土木工程师岗位职责
2013/11/24 职场文书
见习期自我鉴定
2014/01/31 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
竞选班干部演讲稿300字
2014/08/20 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
何玥事迹观后感
2015/06/16 职场文书
教育教学读书笔记
2015/07/02 职场文书
七年级英语教学反思
2016/02/15 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书