一个可移动层问题


<html>
<head>
<style type="text/css">
<!--
       #divFlyBar{
           position:absolute;
           top:100px;
           left:100px;
           cursor:move;
           z-index:100;
           width:200px;
           height:100px;
           background-color:#8FE98B;
       }
-->
</style>
<script language="javascript">
<!--
       var bIsCatchFlyBar = false;
       var dragClickX = 0;
       var dragClickY = 0;       function catchFlyBar(e){
           bIsCatchFlyBar = true;
           var x=event.x+document.body.scrollLeft;                       
           var y=event.y+document.body.scrollTop;
           dragClickX=x-divFlyBar.style.pixelLeft;
           dragClickY=y-divFlyBar.style.pixelTop;
           divFlyBar.setCapture();
           document.onmousemove = moveFlyBar;
       }       function releaseFlyBar(e){
           bIsCatchFlyBar = false;
           divFlyBar.releaseCapture();
           document.onmousemove = null;
       }       function moveFlyBar(e){
           if(bIsCatchFlyBar){
               divFlyBar.style.left = event.x+document.body.scrollLeft-dragClickX;
               divFlyBar.style.top = event.y+document.body.scrollTop-dragClickY;
           }
       }
   function openFlyBar(){
myload_flybar();
divFlyBar.style.visibility = "visible";
}
function myload_flybar(){
divFlyBar.style.top=30;
divFlyBar.style.left=30;
}
window.onload = openFlyBar;
-->
</script>
</head>
<body>
   <div id="divFlyBar" onMouseDown="catchFlyBar()" onMouseUp="releaseFlyBar()">
       哈哈
   </div>
</body>
</html>先要初始一个位置.
默认为left=0,top=0