利用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 相关文章推荐
Z-Blog中用到的js代码
Mar 15 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 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 远程关机操作的代码
2008/12/05 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
2012/05/23 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
JS返回iframe中frameBorder属性值的方法
2015/04/01 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
移动端利用H5实现压缩图片上传功能
2017/03/29 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
在Python中操作时间之strptime()方法的使用
2020/12/30 Python
python Flask 装饰器顺序问题解决
2018/08/08 Python
python操作excel的方法
2018/08/16 Python
django解决跨域请求的问题详解
2019/01/20 Python
详解python中list的使用
2019/03/15 Python
简单了解Python生成器是什么
2019/07/02 Python
Python网络编程之使用TCP方式传输文件操作示例
2019/11/01 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
优秀演讲稿范文
2013/12/29 职场文书
静心口服夜广告词
2014/03/20 职场文书
联谊会主持词
2014/03/26 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
宝塔更新Python及Flask项目的部署
2022/04/11 Python
Java界面编程实现界面跳转
2022/06/16 Java/Android