<!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>
<p id="main" class="dragclass">
<p id="chathead">
<a href="#" onclick="chathidden();">-</a>
<a href="#" onclick="chatshow();">+</a>
<a href="#" onclick="chatclose();">x</a>
</p>
<p id="chatbody">
<p id="chatcontent"></p>
<p 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>
</p>
</p>
</p>
</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>
<p id="test" style="color:yellow;padding-left:100px;">
</p>
</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>
<p id="test" style="color:yellow;padding-left:100px;">
</p>
</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>
<p id="test" style="color:yellow;padding-left:100px;">
</p>
</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>
<p id="main" class="dragclass" style="left:600px;top:300px;">
<p id="chathead">
<a href="#" onclick="chathidden();">-</a>
<a href="#" onclick="chatshow();">+</a>
<a href="#" onclick="chatclose();">x</a>
</p>
<p id="chatbody">
<p id="chatcontent"></p>
<p 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>
</p>
</p>
</p>
</body>
</html>
附解决问题的过程：
1、首先debug，看表现，就知道是在第一次点击的时候，对象的左右边距出错，变成0
2、找到代码中对应位置，输出left和top
3、知道原因，我之前已经知道currentstyle的效果，所以我不需要去网络上搜索相关资料
4、但是我不知道在firefox下如何处理
5、我在google里直接搜索“currentstyle firefox”，很快就找到符合我目的的信息
6、测试通过，发帖子。