js实现窗口拖动代码

<!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" />
<title>使用JavaScript显示浮动窗口</title>
<script>
function showwin(){
var windNode = document.getElementById("winTuo");
windNode.style.display = "inline";
}

function hide(){
var windNode = document.getElementById("winTuo");
windNode.style.display = "none";
}

/*以下JavaScript代码用于使鼠标拖动窗口*/

funs={
    index:100,  
    getFocus:function (target){  
        if(target.style.zIndex!=this.index){  
            this.index += 2;  
            var idx = this.index;  
            target.style.zIndex=idx;  
        }  
    },
    abs:function (element) {
        var result = { x: element.offsetLeft, y: element.offsetTop};
        element = element.offsetParent;
        while (element) {
            result.x += element.offsetLeft;
            result.y += element.offsetTop;
            element = element.offsetParent;
        }
        return result;
    }
};

function Endrag(source,target,offSetX, offSetY){
    source=typeof(source)=="object" ? source:document.getElementById(source);
    target=typeof(target)=="object" ? target:document.getElementById(target);
    var x0=0,y0=0,x1=0,y1=0,moveable=false,index=100,NS=(navigator.appName=='Netscape');
    offSetX=typeof offSetX== "undefined" ? 0:offSetX;
    offSetY=typeof offSetY== "undefined" ? 0:offSetY;
    source.onmousedown=function(e){
        e = e ? e : (window.event ? window.event : null);
        funs.getFocus(target); 
        if(e.button==(NS)?0 :1)  { 
            if(!NS){this.setCapture()}
            x0 = e.clientX ;  
            y0 = e.clientY ;  
            x1 = parseInt(funs.abs(target).x);  
            y1 = parseInt(funs.abs(target).y);    
            moveable = true;  
        }  
    }; 
//拖动;  
    source.onmousemove=function(e){
        e = e ? e : (window.event ? window.event : null);  
        if(moveable){  
            target.style.left = (x1 + e.clientX - x0 - offSetX) + "px";  
            target.style.top  = (y1 + e.clientY - y0 - offSetY) + "px";  
        }  
    }; 
    //停止拖动;  
    source.onmouseup=function (e){ 
        if(moveable)  {  
            if(!NS){this.releaseCapture();}
            moveable = false;  
        }  
    };
}
</script>
<style>
#win{
border:1px #00F solid;
/*窗口大小*/
width:300px;
height:200px;
/*窗口位置*/
position:absolute; /*绝对定位*/
top:100px;
left:200px;
/*窗口开始不可见*/
display:none;
border-width:3px;
background-color:#000000;

}
#title{
background-color:#00F;
color:#0F0;
font-size:20px;
/*控制标题栏左内边框*/
padding-left:3px;
height:28px;
cursor:default;
}
#content{
padding-left:3px;
padding-top:5px;
}
/*控制关闭按钮的未知*/
#close{
/*使关闭按钮向右移动*/
margin-left: 200px;
/*鼠标放在关闭按钮时鼠标显示手形*/
cursor:pointer;
background-color:#000;
color:#0F0;
}

</style>
</head>

<body onload="var i=new Endrag('title',winTuo',0,0);">
<a onclick="showwin()" href="#">点我</a>
<div id="winTuo">
<div id="title"><b>鼠标点击这里才能拖动</b><span id="close" onclick="hide()" >关闭</span></div>
<div id="content" align="center"><font color="#CC00FF"><b>这是显示拖动内容，可放入表单</b></font></div>
</div>
</body>
</html>