JS+CSS打造可拖動的聊天窗口層（兼容）

　　<!DOCTYPE html PUBLIC //WC//DTD XHTML Transitional//EN transitionaldtd>
<html xmlns=>
<head>
<meta httpequiv=contenttype content=text/html; charset=gb>
<meta httpequiv=contentscripttype content=text/javascript>
<meta httpequiv=contentstyletype content=text/css>
<title>DoDi Chat v Beta</title>
<style rel=stylesheet type=text/css media=all />
<!
body {
    textalign:left;
    margin:;
    font:normal px Verdana Arial;
    background:#FFEEFF
}
form {
    margin:;
    font:normal px Verdana Arial;
}
tableinput {
    font:normal px Verdana Arial;
}
a:linka:visited{
    textdecoration:none;
    color:#;
}
a:hover{
    textdecoration:none;
    color:#FF
}
#main {
    width:px;
    position:absolute;
    left:px;
    top:px;
    background:#EFEFFF;
    textalign:left;
    filter:Alpha(opacity=)
}
#ChatHead {
    textalign:right;
    padding:px;
    border:px solid #;
    background:#DCDCFF;
    fontsize:px;
    color:#FF;
    cursor:move;
}
#ChatHead a:link#ChatHead a:visited {
    fontsize:px;
    fontweight:bold;
    padding: px
}
#ChatBody {
    border:px solid #;
    bordertop:none;
    padding:px;
}
#ChatContent {
    height:px;
    padding:px;
    overflowy:scroll;
    wordbreak: breakall
}
#ChatBtn {
    bordertop:px solid #;
    padding:px
}
>
</style>
<script language=javascript type=text/javascript>
<!
function $(d){return documentgetElementById(d);}
function gs(d){var t=$(d);if (t){return tstyle;}else{return null;}}
function gs(da){
    if (dcurrentStyle){
      var curVal=dcurrentStyle[a]
    }else{
      var curVal=documentdefaultViewgetComputedStyle(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 = objChatValue;
    if (ovaluelength>){
      $(ChatContent)innerHTML += <strong>Akon說</strong>+ovalue+<br/>;
      ovalue=;
    }
}

　　if (documentgetElementById){
    (
      function(){
        if (windowopera){ documentwrite(<input type=hidden id=Q value= >); }

        var n = ;
        var dragok = false;
        var yxddydx;

        function move(e)
        {
          if (!e) e = windowevent;
          if (dragok){
            dstyleleft = dx + eclientX x + px;
            dstyletop = dy + eclientY y + px;
            return false;
          }
        }

        function down(e){
          if (!e) e = windowevent;
          var temp = (typeof etarget != undefined)?etarget:esrcElement;
          if (temptagName != HTML|BODY && tempclassName != dragclass){
            temp = (typeof tempparentNode != undefined)?tempparentNode:tempparentElement;
          }
          if(TR==temptagName){
            temp = (typeof tempparentNode != undefined)?tempparentNode:tempparentElement;
            temp = (typeof tempparentNode != undefined)?tempparentNode:tempparentElement;
            temp = (typeof tempparentNode != undefined)?tempparentNode:tempparentElement;
          }

          if (tempclassName == dragclass){
            if (windowopera){ documentgetElementById(Q)focus(); }
            dragok = true;
            tempstylezIndex = n++;
            d = temp;
            dx = parseInt(gs(templeft))|;
            dy = parseInt(gs(temptop))|;
            x = eclientX;
            y = eclientY;
            documentonmousemove = move;
            return false;
          }
        }

        function up(){
          dragok = false;
          documentonmousemove = null;
        }

        documentonmousedown = down;
        documentonmouseup = up;

      }
    )();
}
>
</script>
</head>

　　</body>
</html>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19651.html