利用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 相关文章推荐
密码强度检测效果实现原理与代码
Jan 04 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
基于JavaScript实现轮播图代码
Jul 14 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
JS实现图片切换效果
Nov 17 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
Vue实现日历小插件
Jun 26 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
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
javascript事件冒泡实例分析
2015/05/13 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
2018/05/01 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
vue项目出现页面空白的解决方案
2019/10/31 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
全神贯注教学反思
2014/02/03 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
学校与家长安全责任书
2014/07/23 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
给客户的感谢信
2015/01/21 职场文书
红旗渠导游词
2015/02/09 职场文书
小学工作总结2015
2015/05/04 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
Nginx虚拟主机的配置步骤过程全解
2022/03/31 Servers