打印

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

aultoale [楼主]

番茄红了
高级会员

帖子: 943
体力: 648
威望: 16
当前: 广东广州

专长 PHP,Oracle,项目管理

1^# 大中小发表于 2006-7-4 17:31

一个拖动效果，根据论坛的一些帖子改的，但还有一些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">
	
	</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>

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

http://www.tblog.com.cn

TOP

99818

初级会员

帖子: 49
体力: 138
威望: 1
离线: 470 天

2^# 大中小发表于 2006-7-4 23:23

<!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

TOP

Sheneyan

子虚乌有
超级版主

帖子: 8267
体力: 19489
威望: 177
当前: 福建厦门

专长 JS,JAVA,Oracle

3^# 大中小发表于 2006-7-5 01:06

呃。。。这涉及到一个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">
  
  </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、测试通过，发帖子。

子叶:子乌的叶子
帅哥们，美女们，新的一年终于来了，祝贺你们...终于又老了一岁~

TOP

misshjn

中级会员

帖子: 195
体力: 358
威望: 4
离线: 1 天

4^# 大中小发表于 2006-7-11 17:41

引用:

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

引用:

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

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

------ 我的博客 ------
http://www.happyshow.org

TOP

mickeyboy

宝疙瘩
高级会员

帖子: 382
体力: 843
威望: 35
当前: 广东广州
离线: 20 天

专长 JS,JAVA,MySQL

5^# 大中小发表于 2006-7-12 18:21

还是有一些小问题，拖动的时候这个不能用滚轮操作的。拖动的太在底部了就拖不上去了，需要按好几次才行。建议参考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 编辑 ]

无限级算法thread-2780498-1-6.html 2780498-1-1.html

TOP

枪毙自己

初级会员

帖子: 74
体力: 145
威望: 0
离线: 45 天

发短消息

6^# 大中小发表于 2006-11-30 02:39

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

虚心学习

TOP