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

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

<!--

　　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>

<!--

　　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;

　　}

　　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>

　　</form>

　　</div>

　　</body>

　　</html>

　　一个拖动效果，根据论坛的一些帖子改的，但还有一些BUG一直没法解决，谁能帮我改改？

　　当第一次拖动层时，层的位置会偏离很远。

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

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

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

复制代码代码如下:

　　<style>

　　#test{width:100px;background-color:red;}

　　</style>

　　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>

　　</body>

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

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

　　IE Only

复制代码代码如下:

　　<style>

　　#test{width:100px;background-color:red;}

　　</style>

　　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>

　　</body>

　　FF only

复制代码代码如下:

　　<style>

　　#test{width:100px;background-color:red;}

　　</style>

　　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>

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

　　<head>

<!--

　　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>

<!--

　　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;

　　}

　　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>

　　</form>

　　</div>

　　</body>

　　</html>

　　附解决问题的过程：

　　1、首先debug，看表现，就知道是在第一次点击的时候，对象的左右边距出错，变成0

　　2、找到代码中对应位置，输出left和top

　　3、知道原因，我之前已经知道currentStyle的效果，所以我不需要去网络上搜索相关资料

　　4、但是我不知道在firefox下如何处理

　　5、我在google里直接搜索“currentStyle firefox”，很快就找到符合我目的的信息

　　6、测试通过，发帖子。

教程首页更多教程