经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 拖动层效果，兼容IE和FF!

查看: 11016|回复: 8

拖动层效果，兼容IE和FF! [复制链接]

aultoale　楼主

番茄红了

金牌会员 

帖子: 1560
体力: 4013
威望: 41
居住地: 广东省广州市

发表于 2006-7-4 17:31:00 |显示全部楼层

一个拖动效果，根据论坛的一些帖子改的，但还有一些BUG一直没法解决，谁能帮我改改？
当第一次拖动层时，层的位置会偏离很远。

<!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" />
	
	</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>
</html>

提示：您可以先修改部分代码再运行

西部数码顶级域名注册商39元抢注！

使用道具举报

99818　

初级会员

帖子: 49
体力: 143
威望: 1

发表于 2006-7-4 23:23:00 |显示全部楼层

<!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" />
	
	</style></head><body>
<script language="javascript">var ie=document.all
var ns6=document.getElementById&&!document.all

var dragapproved=false
var z,x,y

function move(e){
if (dragapproved){
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
return false
}
}

function drags(e){
if (!ie&&!ns6)
return
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"

while (firedobj.tagName!=topelement&&firedobj.className!="dragclass"){
	firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className=="dragclass"){
dragapproved=true
z=firedobj
temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=ns6? e.clientX: event.clientX
y=ns6? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false");</script>
<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>

提示：您可以先修改部分代码再运行

我的博客http://baishiwen.blog.163.com 梦里千寻http://bsw168.icpcn.com

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

Sheneyan　

子虚乌有

荣誉管理 

帖子: 8391
体力: 26707
威望: 187
居住地: 江苏省苏州市

发表于 2006-7-5 01:06:00 |显示全部楼层

呃。。。这涉及到一个style的问题。。。

在ie和firefox中，obj.style这个东西实际上只是取得元素中属性style中的值！

如下例，你会发现style块中的属性一个都取不到！

提示：您可以先修改部分代码再运行

看到了没？前两个style 为空，后两个才有值。

如果是ie，问题很好解决，只要把style改成currentStyle即可。
（ie only）

提示：您可以先修改部分代码再运行

而在firefox下，则采用另外一种方式：
（ff only）

提示：您可以先修改部分代码再运行

我绕了半天，你明白你的错误原因了吗？你的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" />
  
  </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>
</html>

提示：您可以先修改部分代码再运行

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

子叶：子乌的叶子
子乌书简

使用道具举报

misshjn　

快乐笛子

中级会员

帖子: 228
体力: 843
威望: 4

发表于 2006-7-11 17:41:00 |显示全部楼层

在ie和firefox中，obj.style这个东西实际上只是取得元素中属性style中的值！

如果是ie，问题很好解决，只要把style改成currentStyle即可。

谢谢 Sheneyan
我之前在项目中也遇到此问题，我一般都笨笨地写一行js初始化元素的style，现在看来真的很笨～

专注XML技术

使用道具举报

mickeyboy　

宝疙瘩

高级会员

帖子: 382
体力: 850
威望: 35
居住地: 山西省太原市

发表于 2006-7-12 18:21:00 |显示全部楼层

还是有一些小问题，拖动的时候这个不能用滚轮操作的。拖动的太在底部了就拖不上去了，需要按好几次才行。建议参考dw8的拖动代码。
研究心得：
-1-拖动可以靠两种计算方法：
第一种：保存层与鼠标的相对位移，然后不断得到鼠标位置再加上位移就是层的位置。
第二种：不断计算鼠标的位移，层的位置加上鼠标的位移就是新的位置。
这两者都各有优缺点。
-2-
事件需要是 body 的 onmousemove
-3-
可能使用了xhtml以后如果出现了垂直滚动条, 拖动功能在 i e6 工作不正常，你必须添加css来修正这个问题。其原因是 ie的滚动条并不是在body层而是在html层。可以使用css强制滚动条在body层。
大概是这样的：
<style type="text/css">
html{
overflow: hidden;
height:100%;
}
body {
width:100%;
height: 100%;
overflow: auto;
background: #fff;
margin: 0px;
padding:0px;
position:relative;
}
</style>

[ 本帖最后由 mickeyboy 于 2006-8-10 14:32 编辑 ]

Extjs,JQuery
ibatis,glassfish
Dream,Eclipse

使用道具举报

枪毙自己　

初级会员

帖子: 78
体力: 219
威望: 0

发表于 2006-11-30 02:39:42 |显示全部楼层

Sheneyan 强人啊
楼主可否放出最终Chat程序的演示？

虚心学习

使用道具举报

shgen　

高级会员

帖子: 261
体力: 640
威望: 0

发表于 2008-10-30 14:01:28 |显示全部楼层

提醒:最后回贴距现在 701 天，请不要无意义回复

原帖由 Sheneyan 于 2006-7-5 01:06 发表
呃。。。这涉及到一个style的问题。。。

在ie和firefox中，obj.style这个东西实际上只是取得元素中属性style中的值！

如下例，你会发现style块中的属性一个都取不到！
[html]

#test{width:100px;backgroun ...