拖动层效果，兼容IE和FF!- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 拖动层效果，兼容IE和FF!

Javascript: javascript实例教程(19) 使用HoTMetal(5); javascript实例教程(19) 使用HoTMetal(6); javascript实例教程(19) 使用HoTMetal(7); javascript实例教程(20) OLE Automation(1); javascript实例教程(20) OLE Automation(2); javascript实例教程(20) OLE Automation(3); javascript实例教程(20) OLE Automation(4); javascript实例教程(20) OLE Automation(5); javascript实例教程(20) OLE Automation(6); javascript实例教程(20) OLE Automation(7); 用javascript实现利用FLASH嵌入声音; javascript版的日期输入控件(6); javascript设计网页中的下拉菜单; javascript设计漫天雪花; javascript制作浮动的工具条; javascript制作闪烁的边框; javascript模拟游戏中的弹出菜单效果; 在IE中使用javascript; 利用javascript制作简单动画; 首页地址添加到收藏夹(javascript)

No. « ‹ 234 235 236 237 › »

技术文章搜索

关键字

Javascript 中的拖动层效果，兼容IE和FF!

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 187 ::

收藏到网摘: n/a

跟随鼠标旋转的文字由 element.appendChild(newNode) ,谈开去

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=gb2312"> 
 <meta http-equiv="content-script-type" content="text/javascript"> 
 <meta http-equiv="content-style-type" content="text/css"> 
 <title>DoDi Chat v1.0 Beta</title> 
 <style rel="stylesheet" type="text/css" media="all" /> 
 <!-- 
 body { 
 text-align:left; 
 margin:0; 
 font:normal 12px Verdana, Arial; 
 background:#FFEEFF 
 } 
 form { 
 margin:0; 
 font:normal 12px Verdana, Arial; 
 } 
 table,input { 
 font:normal 12px Verdana, Arial; 
 } 
 a:link,a:visited{ 
 text-decoration:none; 
 color:#333333; 
 } 
 a:hover{ 
 text-decoration:none; 
 color:#FF6600 
 } 
 #main { 
 width:400px; 
 position:absolute; 
 left:600px; 
 top:100px; 
 background:#EFEFFF; 
 text-align:left; 
 filter:Alpha(opacity=90) 
 } 
 #ChatHead { 
 text-align:right; 
 padding:3px; 
 border:1px solid #003399; 
 background:#DCDCFF; 
 font-size:11px; 
 color:#3366FF; 
 cursor:move; 
 } 
 #ChatHead a:link,#ChatHead a:visited, { 
 font-size:14px; 
 font-weight:bold; 
 padding:0 3px 
 } 
 #ChatBody { 
 border:1px solid #003399; 
 border-top:none; 
 padding:2px; 
 } 
 #ChatContent { 
 height:200px; 
 padding:6px; 
 overflow-y:scroll; 
 word-break: break-all 
 } 
 #ChatBtn { 
 border-top:1px solid #003399; 
 padding:2px 
 } 
 --> 
 </style> 
 <script language="javascript" type="text/javascript"> 
 <!-- 
 function ChatHidden() 
 { 
 document.getElementById("ChatBody").style.display = "none"; 
 } 
 function ChatShow() 
 { 
 document.getElementById("ChatBody").style.display = ""; 
 } 
 function ChatClose() 
 { 
 document.getElementById("main").style.display = "none"; 
 } 
 function ChatSend(obj) 
 { 
 var o = obj.ChatValue; 
 if (o.value.length>0){ 
 document.getElementById("ChatContent").innerHTML += "<strong>Akon说：</strong>"+o.value+"<br/>"; 
 o.value=''; 
 } 
 } 
 if (document.getElementById) 
 { 
 ( 
 function() 
 { 
 if (window.opera){ document.write("<input type='hidden' id='Q' value=' '>"); } 
 var n = 500; 
 var dragok = false; 
 var y,x,d,dy,dx; 
 function move(e) 
 { 
 if (!e) e = window.event; 
 if (dragok){ 
 d.style.left = dx + e.clientX - x + "px"; 
 d.style.top = dy + e.clientY - y + "px"; 
 return false; 
 } 
 } 
 function down(e) 
 { 
 if (!e) e = window.event; 
 var temp = (typeof e.target != "undefined")?e.target:e.srcElement; 
 if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){ 
 temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
 } 
 if('TR'==temp.tagName){ 
 temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
 temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
 temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
 } 
 if (temp.className == "dragclass"){ 
 if (window.opera){ document.getElementById("Q").focus(); } 
 dragok = true; 
 temp.style.zIndex = n++; 
 d = temp; 
 dx = parseInt(temp.style.left+0); 
 dy = parseInt(temp.style.top+0); 
 x = e.clientX; 
 y = e.clientY; 
 document.onmousemove = move; 
 return false; 
 } 
 } 
 function up(){ 
 dragok = false; 
 document.onmousemove = null; 
 } 
 document.onmousedown = down; 
 document.onmouseup = up; 
 } 
 )(); 
 } 
 --> 
 </script> 
</head> 
<body> 
<div id="main" class="dragclass"> 
 <div id="ChatHead"> 
 <a href="#" onclick="ChatHidden();">-</a> 
 <a href="#" onclick="ChatShow();">+</a> 
 <a href="#" onclick="ChatClose();">x</a> 
 </div> 
 <div id="ChatBody"> 
 <div id="ChatContent"></div> 
 <div id="ChatBtn"> 
 <form action="" name="chat" method="post"> 
 <textarea name="ChatValue" rows="3" style="width:350px"></textarea> 
 <input name="Submit" type="button" value="Chat" onclick="ChatSend(this.form);" /> 
 </form> 
 </div> 
 </div> 
</div> 
</body> 
</html>

一个拖动效果，根据论坛的一些帖子改的，但还有一些BUG一直没法解决，谁能帮我改改？
当第一次拖动层时，层的位置会偏离很远。
呃。。。这涉及到一个style的问题。。。
在ie和firefox中，obj.style这个东西实际上只是取得元素中属性style中的值！
如下例，你会发现style块中的属性一个都取不到！

复制代码代码如下:

<style> 
#test{width:100px;background-color:red;} 
</style> 
<script> 
window.onload=function(){ 
var t=document.getElementById('test') 
var ts=t.style; 
t.innerHTML= 
"t.style.width:"+ts.width+"<br />"+ 
"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+ 
"t.style.color:"+ts.color+"<br />"+ 
"t.style.paddingLeft:"+ts.paddingLeft 
} 
</script> 
<body> 
<div id="test" style="color:yellow;padding-left:100px;"> 
</div> 
</body>

看到了没？前两个style 为空，后两个才有值。
如果是ie，问题很好解决，只要把style改成currentStyle即可。
IE Only

复制代码代码如下:

<style> 
#test{width:100px;background-color:red;} 
</style> 
<script> 
window.onload=function(){ 
var t=document.getElementById('test') 
var ts=t.currentStyle; 
t.innerHTML= 
"t.style.width:"+ts.width+"<br />"+ 
"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+ 
"t.style.color:"+ts.color+"<br />"+ 
"t.style.paddingLeft:"+ts.paddingLeft 
} 
</script> 
<body> 
<div id="test" style="color:yellow;padding-left:100px;"> 
</div> 
</body>

FF only

复制代码代码如下:

<style> 
#test{width:100px;background-color:red;} 
</style> 
<script> 
window.onload=function(){ 
var t=document.getElementById('test') 
var ts=document.defaultView.getComputedStyle(t, null); 
t.innerHTML= 
"t.style.width:"+ts.width+"<br />"+ 
"t.style.backgroundColor:"+ts.backgroundColor+"<br />"+ 
"t.style.color:"+ts.color+"<br />"+ 
"t.style.paddingLeft:"+ts.paddingLeft 
} 
</script> 
<body> 
<div id="test" style="color:yellow;padding-left:100px;"> 
</div> 
</body>

我绕了半天，你明白你的错误原因了吗？你的style全都是文档级style，而你试图获取left的时候，第一次获得的只是0,自然会把你的框给挪到边上去了。

最终效果

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=gb2312"> 
 <meta http-equiv="content-script-type" content="text/javascript"> 
 <meta http-equiv="content-style-type" content="text/css"> 
 <title>DoDi Chat v1.0 Beta</title> 
 <style rel="stylesheet" type="text/css" media="all" /> 
 <!-- 
 body { 
 text-align:left; 
 margin:0; 
 font:normal 12px Verdana, Arial; 
 background:#FFEEFF 
 } 
 form { 
 margin:0; 
 font:normal 12px Verdana, Arial; 
 } 
 table,input { 
 font:normal 12px Verdana, Arial; 
 } 
 a:link,a:visited{ 
 text-decoration:none; 
 color:#333333; 
 } 
 a:hover{ 
 text-decoration:none; 
 color:#FF6600 
 } 
 #main { 
 width:400px; 
 position:absolute; 
 left:600px; 
 top:100px; 
 background:#EFEFFF; 
 text-align:left; 
 filter:Alpha(opacity=90) 
 } 
 #ChatHead { 
 text-align:right; 
 padding:3px; 
 border:1px solid #003399; 
 background:#DCDCFF; 
 font-size:11px; 
 color:#3366FF; 
 cursor:move; 
 } 
 #ChatHead a:link,#ChatHead a:visited, { 
 font-size:14px; 
 font-weight:bold; 
 padding:0 3px 
 } 
 #ChatBody { 
 border:1px solid #003399; 
 border-top:none; 
 padding:2px; 
 } 
 #ChatContent { 
 height:200px; 
 padding:6px; 
 overflow-y:scroll; 
 word-break: break-all 
 } 
 #ChatBtn { 
 border-top:1px solid #003399; 
 padding:2px 
 } 
 --> 
 </style> 
 <script language="javascript" type="text/javascript"> 
 <!-- 
 function $(d){return document.getElementById(d);} 
 function gs(d){var t=$(d);if (t){return t.style;}else{return null;}} 
 function gs2(d,a){ 
 if (d.currentStyle){ 
 var curVal=d.currentStyle[a] 
 }else{ 
 var curVal=document.defaultView.getComputedStyle(d, null)[a] 
 } 
 return curVal; 
 } 
 function ChatHidden(){gs("ChatBody").display = "none";} 
 function ChatShow(){gs("ChatBody").display = "";} 
 function ChatClose(){gs("main").display = "none";} 
 function ChatSend(obj){ 
 var o = obj.ChatValue; 
 if (o.value.length>0){ 
 $("ChatContent").innerHTML += "<strong>Akon说：</strong>"+o.value+"<br/>"; 
 o.value=''; 
 } 
 } 
 if (document.getElementById){ 
 ( 
 function(){ 
 if (window.opera){ document.write("<input type='hidden' id='Q' value=' '>"); } 
 var n = 500; 
 var dragok = false; 
 var y,x,d,dy,dx; 
 function move(e) 
 { 
 if (!e) e = window.event; 
 if (dragok){ 
 d.style.left = dx + e.clientX - x + "px"; 
 d.style.top = dy + e.clientY - y + "px"; 
 return false; 
 } 
 } 
 function down(e){ 
 if (!e) e = window.event; 
 var temp = (typeof e.target != "undefined")?e.target:e.srcElement; 
 if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass"){ 
 temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
 } 
 if('TR'==temp.tagName){ 
 temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
 temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
 temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement; 
 } 
 if (temp.className == "dragclass"){ 
 if (window.opera){ document.getElementById("Q").focus(); } 
 dragok = true; 
 temp.style.zIndex = n++; 
 d = temp; 
 dx = parseInt(gs2(temp,"left"))|0; 
 dy = parseInt(gs2(temp,"top"))|0; 
 x = e.clientX; 
 y = e.clientY; 
 document.onmousemove = move; 
 return false; 
 } 
 } 
 function up(){ 
 dragok = false; 
 document.onmousemove = null; 
 } 
 document.onmousedown = down; 
 document.onmouseup = up; 
 } 
 )(); 
 } 
 --> 
 </script> 
</head> 
<body> 
<div id="main" class="dragclass" style="left:600px;top:300px;"> 
 <div id="ChatHead"> 
 <a href="#" onclick="ChatHidden();">-</a> 
 <a href="#" onclick="ChatShow();">+</a> 
 <a href="#" onclick="ChatClose();">x</a> 
 </div> 
 <div id="ChatBody"> 
 <div id="ChatContent"></div> 
 <div id="ChatBtn"> 
 <form action="" name="chat" method="post"> 
 <textarea name="ChatValue" rows="3" style="width:350px"></textarea> 
 <input name="Submit" type="button" value="Chat" onclick="ChatSend(this.form);" /> 
 </form> 
 </div> 
 </div> 
</div> 
</body> 
</html>

附解决问题的过程：
1、首先debug，看表现，就知道是在第一次点击的时候，对象的左右边距出错，变成0
2、找到代码中对应位置，输出left和top
3、知道原因，我之前已经知道currentStyle的效果，所以我不需要去网络上搜索相关资料
4、但是我不知道在firefox下如何处理
5、我在google里直接搜索“currentStyle firefox”，很快就找到符合我目的的信息
6、测试通过，发帖子。

跟随鼠标旋转的文字由 element.appendChild(newNode) ,谈开去

Javascript 中的 拖动层效果，兼容IE和FF!

评论 (0) All

Javascript 中的拖动层效果，兼容IE和FF!