拖拽狀態(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   } 

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

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();       }     };   }; };