层的拖放

  之前有在網上看到過一些關于層的拖放的文章,記得有种的做法是當鼠標移到層上並按住左鍵不放拖動時,層會跟着鼠标一起運動
當放開左鍵時,層就不會隨鼠标運動了.這种方法在網上可以找到了.以下是我的做法,与上述不同的是,在鼠标拖動的時候層不會跟隨,而是當
鬆開左鍵時層才移動到目標位置:
  1.先是層代碼:
    

<div onmouseup="release_mouse();" onmousedown="mouseed(event)" id="login" style="Z-INDEX: 100; LEFT: 300px; VISIBILITY: hidden; WIDTH: 250px; BORDER-TOP-STYLE: ridge; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; POSITION: absolute; TOP: 200px; HEIGHT: 118px; BACKGROUND-COLOR: #89a7b1; BORDER-BOTTOM-STYLE: ridge"
            align="center">
            <form>
                <table cellSpacing="0" cellPadding="0" width="100%" align="center" border="1">
                    <tr style="COLOR: #ffffff; BACKGROUND-COLOR: #3f49cf">
                        <td align="right" colSpan="2"><input onclick="div_hidden();" type="button" value="關閉X"></td>
                    </tr>
                    <tr>
                        <td noWrap>用戶名</td>
                        <td><input id="username" type="text" size="20" name="username" width="100px"></td>
                    </tr>
                    <tr>
                        <td noWrap>密碼</td>
                        <td><input id="pwd" type="password" size="20" name="pwd" width="100px"></td>
                    </tr>
                    <tr>
                        <td><input id="dr" onclick="return gonext();" type="submit" value="登錄" name="dr"></td>
                        <td><input type="reset" value="重設"></td>
                    </tr>
                    <tr>
                        <td id="notice" colSpan="2"></td>
                    </tr>
                </table>
            </form>
        </div>

  2.以下是層操作用到的函數(JS,有部分不必要的代碼沒有貼出):
    

var dragx=0,dragy=0,msx,msy;
        function mouseed(oEvent)
        {
            document.body.onselectstart=function(){return false;};
            var oDiv=document.getElementById("login");
            oDiv.onselectstart=null;
            msx=event.clientX;
            msy=event.clientY;
            
            dragx=msx-oDiv.style.pixelLeft;    
            dragy=msy-oDiv.style.pixelTop ;
            document.onmouseup=doc_drap;    
            return false;
        }
        function doc_drap()
        {
            var oDiv=document.getElementById("login");
            oDiv.style.pixelLeft=event.x-dragx;
            oDiv.style.pixelTop=event.y-dragy;
            oDiv.releaseCapture();
            document.body.onselectstart=null;
            document.onmouseup=null;
        }
        function div_show(obj)
        {    
            
            //alert(oDiv.style.visibility);    
            var oDiv=document.getElementById("login");
            oDiv.style.top=getIEy(obj)+window.event.offsetY-event.y+200;
            oDiv.style.left=getIEx(obj)+window.event.offsetX-event.x+300;
            oDiv.style.visibility=""; 
            return false;  
        
        }
        function release_mouse()
        {
            document.body.onselectstart=null;
            document.onmouseup=null;
            return false;
        }
        function div_hidden()
        {
            var oDiv=document.getElementById("login");
            oDiv.style.visibility="hidden";
        }
        function getIEy(e)
        {
            var t=e.offsetTop;
            while(e=e.offsetParent){
            t+=e.offsetTop;
            }
            return t;
        }
        function getIEx(e){
            var l=e.offsetLeft;
            while(e=e.offsetParent){
            l+=e.offsetLeft;
            }
            return l;
        }
        function gonext()
        {
           
            var uname=document.all("username").value;
            var pwd=document.all("pwd").value;
            var oRequest=new XMLHttpRequest(); 
            var Param="";
            var rnd=Math.round(Math.random()*10000) ;
            Param=addp(Param,"bu","<%=src%>");
            Param=addp(Param,"uid",uname);
            Param=addp(Param,"isr","1");
            
            Param=addp(Param,"pwd",pwd);//設置訪問頁
            
            var url,result="",xmldom,ccx;
            
            document.all("chartfx").style.width=window.screen.availWidth-17;
            url="../logon/loginfo.aspx?rnd"+rnd+"=x";
            oRequest.open("post",url,false);
            oRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
            oRequest.setRequestHeader("If-Modified-Since","0");   
            oRequest.onreadystatechange=function()
            {
                 if(oRequest.readyState==4 && oRequest.status==200)
                {
                   // alert(oRequest.ResponseText);
                    xmldom=oRequest.responseXML;
                    ccx=oRequest.responseText;
                }
                
            }//
            oRequest.send(Param);
            
            var nodep=xmldom.getElementsByTagName("pass")[0];
            if(typeof nodep!="undefined")
            {
                result=nodep.text;
            }
            //alert(url);
            if(result=="1") 
            {
                window.location="test.asp";
            }
            
            else if(result=="0") document.all("notice").innerHTML="<font color='red'>用戶名或密碼錯誤!</font>";
            else
                document.all("notice").innerHTML="<font color='red'>連接失敗!</font>";
            return false;
        }