拖动层效果兼容IE和FF!

棒邦棒

棒邦棒

2016-02-19 11:47

今天图老师小编给大家精心推荐个拖动层效果兼容IE和FF!教程，一起来看看过程究竟如何进行吧！喜欢还请点个赞哦~
代码如下：

!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"
    titleDoDi 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.length0){
            document.getElementById("ChatContent").innerHTML += "strongAkon说：/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
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

一个拖动效果，根据论坛的一些帖子改的，但还有一些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
div id="test" style="color:yellow;padding-left:100px;"
/div
/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
div id="test" style="color:yellow;padding-left:100px;"
/div
/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
div id="test" style="color:yellow;padding-left:100px;"
/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"
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"
  titleDoDi 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.length0){
      $("ChatContent").innerHTML += "strongAkon说：/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
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、测试通过，发帖子。
展开更多 （50%）
分享

猜你喜欢

拖动层效果兼容IE和FF!

Web开发
拖动层效果兼容IE和FF!

兼容IE FF Opera的javascript最短的拖动代码

Web开发
兼容IE FF Opera的javascript最短的拖动代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

javascript最短的拖动代码[兼容FF]

Web开发
javascript最短的拖动代码[兼容FF]

IE和FF对CSS兼容问题

Web开发
IE和FF对CSS兼容问题

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JS画图(非VML)--兼容IE/FF

Web开发
JS画图(非VML)--兼容IE/FF

Javascript在IE和FF里的兼容问题

Web开发
Javascript在IE和FF里的兼容问题

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

准确获得页面、窗口高度及宽度的JS

准确获得页面、窗口高度及宽度的JS

如何获得QQ农场大运会UU树种子

如何获得QQ农场大运会UU树种子
下拉加载更多内容 ↓