利用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 框架使用教程 AJAX篇
Oct 11 Javascript
jQuery源码分析-01总体架构分析
Nov 14 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
详解JavaScript中的客户端消息框架设计原理
Jun 24 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
原生js实现购物车功能
Sep 23 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实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
2016/11/30 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
用Python写冒泡排序代码
2016/04/12 Python
python hough变换检测直线的实现方法
2019/07/12 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
python golang中grpc 使用示例代码详解
2020/06/03 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
公证书标准格式
2014/04/10 职场文书
难忘的一课教学反思
2014/04/30 职场文书
爱心募捐感谢信
2015/01/22 职场文书
人民的好儿女观后感
2015/06/18 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
python开发飞机大战游戏
2021/07/15 Python
python创建字典及相关管理操作
2022/04/13 Python