拖动层效果，兼容IE和FF!第1/2页

154 阅读 0 评论 102 点赞

我是靠谱客的博主腼腆钢笔，最近开发中收集的这篇文章主要介绍拖动层效果，兼容IE和FF!第1/2页，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

<!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> 
<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>