利用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 相关文章推荐
Prototype使用指南之form.js
Jan 10 Javascript
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
基于vue+element实现全局loading过程详解
Jul 10 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
php 不同编码下的字符串长度区分
2009/09/26 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
javascript设计模式之module(模块)模式
2016/08/19 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
Vue实现简单计算器案例
2020/02/25 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python之import机制详解
2014/07/03 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
Django csrf 验证问题的实现
2018/10/09 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
Python爬虫教程之利用正则表达式匹配网页内容
2020/12/08 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
《囚绿记》教学反思
2014/03/01 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js