拖动层

2006-10-27 00:00:00 作者：

拖动层

<html> 
<head> 
<title>拖动层</title> 
<style> 
    td{font-size:12px;} 
    /*模拟窗体*/ 
    .vwin{ 
        position:absolute; 
        border-top: 2px outset buttonhighlight; 
        border-left: 2px outset buttonhighlight; 
        border-bottom: 2px outset buttonshadow; 
        border-right: 2px outset buttonshadow; 
    } 
    .vwintit{height:18px;background-color:#000099;color:#ffffff;font-weight:bold;cursor:move;} 
    .vwinbody{background-color:#D6D3CE;} 
</style> 
</head> 
<body> 
    <table id="win01" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0"> 
        <tr> 
            <td class="vwintit" forid="win01">&nbsp;窗口一</td> 
        </tr> 
        <tr> 
            <td class="vwinbody" forid="win01">&nbsp;</td> 
        </tr> 
    </table> 
    <table id="win02" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0"> 
        <tr> 
            <td class="vwintit" forid="win02">&nbsp;窗口二</td> 
        </tr> 
        <tr> 
            <td class="vwinbody" forid="win02">&nbsp;</td> 
        </tr> 
    </table> 
    <table id="win03" class="vwin" width="300" height="200" cellspacing="0" cellpadding="0" border="0"> 
        <tr> 
            <td class="vwintit" forid="win03">&nbsp;窗口三</td> 
        </tr> 
        <tr> 
            <td class="vwinbody" forid="win03">&nbsp;</td> 
        </tr> 
    </table> 
<script> 
    //This javascript was writen by dron 
    var md=false,mobj,ox,oy,index=1000; 
    function document.onmousedown(){ 
        winfocus(); 
        if(event.srcElement.className=="vwintit") 
        { 
            md = true; 
            mobj = document.getElementById(event.srcElement.forid); 
            ox = mobj.offsetLeft - event.x; 
            oy = mobj.offsetTop - event.y; 
        } 
    } 
    document.onmouseup=function(){md=false;} 
    function document.onmousemove() 
    { 
        if(md) 
        { 
            mobj.style.left = event.x + ox; 
            mobj.style.top = event.y + oy; 
        } 
    } 
    function winfocus() 
    { 
        fobj=document.getElementById(event.srcElement.forid); 
        if(fobj==null){return false} 
        if(fobj.style.zIndex!=index) 
        { 
                index = index + 1; 
                fobj.style.zIndex=index; 
        } 
    } 
    document.onclick=winfocus; 
</script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]