利用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第一课
Feb 27 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
制药工程专业应届生求职信
2013/09/24 职场文书
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
房产协议书范本2014
2014/09/30 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
《给予树》教学反思
2016/03/03 职场文书
导游词之井冈山
2019/11/20 职场文书
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL