拖拽狀態 = 0鼠標在元素上按下的時候{     拖拽狀態 = 1     記錄下鼠標的x和y坐標     記錄下元素的x和y坐標     }   鼠標在元素上移動的時候{     如果拖拽狀態是0就什么也不做。     如果拖拽狀態是1，那么     元素y = 現在鼠標y - 原來鼠標y + 原來元素y     元素x = 現在鼠標x - 原來鼠標x + 原來元素x     }     鼠標在任何時候放開的時候{     拖拽狀態 = 0   } 

<div class="calculator" id="drag">**********</div> 

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

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