打印

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

aultoale [楼主]

番茄红了

高级会员

认证
帖子: 1414
体力: 769
威望: 30
当前: 广东广州

专长 JS,PHP,项目管理

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>

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

EGP Framework

TOP

西部数码VPS主机1G内存仅266元

99818

初级会员

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

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

广州周立功诚聘—平面/网页/UI/工业设计师 | 天业互联-酷睿租用599￥

Sheneyan

子虚乌有

荣誉管理团队

认证
帖子: 8272
体力: 19495
威望: 177
当前: 福建厦门
离线: 34 天

专长 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

中级会员

帖子: 208
体力: 385
威望: 4
离线: 2 天

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

引用:

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

引用:

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

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

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

TOP

用CSS布局建站从零开始 | Photoshop中打造史诗般梦幻场景 | 05年第一次软件行业创业的惨痛教训

mickeyboy

宝疙瘩

高级会员

帖子: 382
体力: 843
威望: 35
当前: 山西太原
离线: 239 天

专长 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

枪毙自己

初级会员

帖子: 78
体力: 145
威望: 0
离线: 136 天

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

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

虚心学习

TOP

shgen

中级会员

帖子: 119
体力: 296
威望: 0
离线: 1 天

专长 前端制作,JS

7^# 大中小发表于 2008-10-30 14:01

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

引用:

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

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

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

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

这个好