頁面拖拽效果

今天需要做一個懸浮效果，做了一個簡單的拖拽

<script language="javascript">
var firstX=0; var firstY=0;
var relativeX=0; var relativeY=0;
var move=false;
    //mouse position
    function mouseCoords()
    {
     var ev = ev || window.event;
     if(ev.pageX || ev.pageY){
      return {x:ev.pageX, y:ev.pageY};
     }
     return {
      x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
      y:ev.clientY + document.body.scrollTop  - document.body.clientTop
     };
    }

    function StartDrag(obj)
    {
        obj.setCapture();
        obj.style.background="#5684FE";
        relativeX=parseInt(mouseCoords().x)-parseInt(obj.style.left);
        relativeY=parseInt(mouseCoords().y)-parseInt(obj.style.top);
        move=true;
    }

    function Drag(obj)
    {
        if(move)
        {  
            obj.style.left=parseInt(mouseCoords().x)-parseInt(relativeX);
            obj.style.top=parseInt(mouseCoords().y)-parseInt(relativeY);
        }
    }

    function StopDrag(obj)
    {
        obj.style.background="#5684FE";
        obj.releaseCapture();
        move = false;
    }
</script>

 

 

<div runat="server" id="divInstance"  style="display: none; position: absolute;
    width: 400px; height: 30px; top: 50px; left: 50px; z-index: 1000; background: #5684FE"
    onmousedown="StartDrag(this)" onmousemove="Drag(this)" onmouseup="StopDrag(this)">
    123456
</div>