利用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 读后台cookie代码
Sep 15 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
JavaScript中的this关键字使用详解
Aug 14 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
详解vue 组件的实现原理
Nov 12 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/03/27 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
小学生考试获奖感言
2014/01/30 职场文书
法律顾问服务方案
2014/05/15 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
单位工作证明书格式
2014/10/04 职场文书
综合办公室岗位职责
2015/04/11 职场文书
倡议书的格式写法
2015/04/28 职场文书
民主生活会意见
2015/06/05 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang
如何利用python实现列表嵌套字典取值
2022/06/10 Python