JS 事件基礎 拖拽

學習筆記：
拖拽div要發生三個事件：1.鼠標按下onmousedown; 2.鼠標移動onmousemove; 3.鼠標鬆開onmouseup;

注意事項：（1）要防止div移出可視框，要限制div移動的橫縱座標；
（2）防止火狐的bug, 要在最後寫上return false，阻止默認事件；
（3）防止鼠標運動時移出div，所以要用document.onmousemove和document.onmouseup，不能用oDiv.onmousemove;

  <script>
  window.onload=function()
  {
    var oDiv=document.getElementById('div1');
    var disX=0;
    var disY=0;

    //封裝一個函數用於獲取鼠標座標
        function getPos(ev)
        {
           var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
           var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;  

           return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};     
        }

        oDiv.onmousedown=function(ev)
        {
           var oEvent=ev||event;
           var pos=getPos(oEvent);  //這樣就可以獲取鼠標座標，比如pos.x表示鼠標橫座標

           disX=pos.x-oDiv.offsetLeft;
           disY=pos.y-oDiv.offsetTop;

           document.onmousemove=function(ev)  
           /*由於要防止鼠標滑動太快跑出div，這裏應該用document.
           因爲觸發onmousemove時要重新獲取鼠標的座標，不能使用父函數上的pos.x和pos.y，所以必須寫var oEvent=ev||event;var pos=getPos(oEvent);*/
           {
             var oEvent=ev||event;
             var pos=getPos(oEvent);

             //防止div跑出可視框
             var l=pos.x-disX;
             var t=pos.y-disY;
             if(l<0)
             {
              l=0;
             }
             else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
             {
              l=document.documentElement.clientWidth-oDiv.offsetWidth;
             }

             if(t<0)
             {
              t=0;
             }
             else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
             {
              t=document.documentElement.clientHeight-oDiv.offsetHeight;
             }

             oDiv.style.left=l+'px';
             oDiv.style.top=t+'px';
           }

           document.onmouseup=function(ev)
           {
              document.onmousemove=null; //將move清除
              document.onmouseup=null;
           }

           return false;  //火狐的bug，要阻止默認事件
        }


  }