拖拽狀態(tài) = 0鼠標(biāo)在元素上按下的時(shí)候{   
  拖拽狀態(tài) = 1   
  記錄下鼠標(biāo)的x和y坐標(biāo)   
  記錄下元素的x和y坐標(biāo)   
  }  
 鼠標(biāo)在元素上移動(dòng)的時(shí)候{   
  如果拖拽狀態(tài)是0就什么也不做。   
  如果拖拽狀態(tài)是1，那么   
  元素y = 現(xiàn)在鼠標(biāo)y - 原來鼠標(biāo)y + 原來元素y   
  元素x = 現(xiàn)在鼠標(biāo)x - 原來鼠標(biāo)x + 原來元素x   
  }    
 鼠標(biāo)在任何時(shí)候放開的時(shí)候{   
  拖拽狀態(tài) = 0   
} 

**********
 

calculator { 
  position: absolute; /*設(shè)置絕對(duì)定位，脫離文檔流，便于拖拽*/ 
  display: block; 
  width: 218px; 
  height: 280px; 
  cursor: move;  /*鼠標(biāo)呈拖拽狀*/ 
} 

window.onload = function() { 
  //拖拽功能(主要是觸發(fā)三個(gè)事件：onmousedown\onmousemove\onmouseup) 
  var drag = document.getElementById('drag'); 
  //點(diǎn)擊某物體時(shí)，用drag對(duì)象即可，move和up是全局區(qū)域，也就是整個(gè)文檔通用，應(yīng)該使用document對(duì)象而不是drag對(duì)象(否則，采用drag對(duì)象時(shí)物體只能往右方或下方移動(dòng)) 
  drag.onmousedown = function(e) { 
    var e = e || window.event; //兼容ie瀏覽器 
    var diffX = e.clientX - drag.offsetLeft; //鼠標(biāo)點(diǎn)擊物體那一刻相對(duì)于物體左側(cè)邊框的距離=點(diǎn)擊時(shí)的位置相對(duì)于瀏覽器最左邊的距離-物體左邊框相對(duì)于瀏覽器最左邊的距離 
    var diffY = e.clientY - drag.offsetTop; 
    /*低版本ie bug:物體被拖出瀏覽器可是窗口外部時(shí)，還會(huì)出現(xiàn)滾動(dòng)條， 
      解決方法是采用ie瀏覽器獨(dú)有的2個(gè)方法setCapture()\releaseCapture(),這兩個(gè)方法， 
      可以讓鼠標(biāo)滑動(dòng)到瀏覽器外部也可以捕獲到事件，而我們的bug就是當(dāng)鼠標(biāo)移出瀏覽器的時(shí)候， 
      限制超過的功能就失效了。用這個(gè)方法，即可解決這個(gè)問題。注：這兩個(gè)方法用于onmousedown和onmouseup中*/ 
      if(typeof drag.setCapture!='undefined'){ 
        drag.setCapture(); 
      } 
    document.onmousemove = function(e) { 
      var e = e || window.event; //兼容ie瀏覽器 
      var left=e.clientX-diffX; 
      var top=e.clientY-diffY; 
      //控制拖拽物體的范圍只能在瀏覽器視窗內(nèi)，不允許出現(xiàn)滾動(dòng)條 
      if(left<0){ 
        left=0; 
      }else if(left >window.innerWidth-drag.offsetWidth){ 
        left = window.innerWidth-drag.offsetWidth; 
      } 
      if(top<0){ 
        top=0; 
      }else if(top >window.innerHeight-drag.offsetHeight){ 
        top = window.innerHeight-drag.offsetHeight; 
      } 
      //移動(dòng)時(shí)重新得到物體的距離，解決拖動(dòng)時(shí)出現(xiàn)晃動(dòng)的現(xiàn)象 
      drag.style.left = left+ 'px'; 
      drag.style.top = top + 'px'; 
    }; 
    document.onmouseup = function(e) { //當(dāng)鼠標(biāo)彈起來的時(shí)候不再移動(dòng) 
      this.onmousemove = null; 
      this.onmouseup = null; //預(yù)防鼠標(biāo)彈起來后還會(huì)循環(huán)（即預(yù)防鼠標(biāo)放上去的時(shí)候還會(huì)移動(dòng)） 
      //修復(fù)低版本ie bug 
      if(typeof drag.releaseCapture!='undefined'){ 
        drag.releaseCapture(); 
      } 
    }; 
  }; 
};