如果要設置對象拖動，必須使用三個事件，並且這三個事件的使用順序不能顛倒。
1.onmousedown:鼠標按下事件
2.onmousemove:鼠標移動事件
3.onmouseup:鼠標擡起事件
拖動的基本原理是根據鼠標的移動來移動被拖動的元素。鼠標的移動也是x、y坐標的變化；元素的移動就是style.position的上下左右的變化，當然不是要隨時移動鼠標，而是判斷鼠標左鍵是否按下，是否按在壹個可拖動的元素上。
基本想法如下:
當鼠標按在元素{
拖動狀態= 1
記錄鼠標的x和y坐標。
記錄元素的x和y坐標。
}
當鼠標移動到元素上時{
如果拖動狀態為0，什麽都不做。
如果拖動狀態為1，則
元素y =當前鼠標y-原始鼠標y+原始元素y
元素x =當前鼠標x-原始鼠標x+原始元素x
}
每當釋放鼠標時{
拖動狀態= 0
}部分示例代碼:
HTML部分
& ltp class="calculator" id="drag " >* * * * * * * * * & lt/p & gt；CSS部分
計算器{
位置:絕對；/*設置絕對定位，脫離文檔流，方便拖拽*/
顯示:塊；
寬度:218px；
高度:280px
光標:移動；/*鼠標被拖動*/
}JS部分
window.onload = function() {
//拖動功能(主要觸發三個事件:onmousedown \ onmousemove \ onmouseup)
var drag = document . getelementbyid(' drag ')；
//當點擊壹個對象時，使用拖動對象即可。move和up是全局區域，即整個文檔是通用的。應該使用document對象而不是drag對象(否則，使用drag對象時對象只能向右或向下移動)。
drag.onmousedown = function(e) {
var e = e | | window.event//兼容ie瀏覽器
var diffX = e . clientx-drag . offset left；//鼠標點擊的瞬間距離對象左邊界的距離=點擊時的位置到瀏覽器最左上角的距離-對象左邊界到瀏覽器最左上角的距離。
var diffY = e . clienty-drag . offsettop；
/*較低版本的ie bug:當壹個對象被拖出瀏覽器但在窗口之外時，會出現滾動條。
解決方法是采用ie瀏覽器特有的兩種方法，setcapture () \ releasedcapture()，
妳可以在瀏覽器外滑動鼠標，捕捉事件，我們的bug是當鼠標移出瀏覽器時，
超過限制的功能將無效。這個問題可以用這個方法解決。註意:這兩個方法在onmousedown和onmouseup */中使用
if(typeof drag.setCapture！= '未定義'){
drag . set capture()；
}
document . onmousemove = function(e){
var e = e | | window.event//兼容ie瀏覽器
var left = e . clientx-diffX；
var top=e.clientY-diffY。
//只在瀏覽器窗口內控制拖動對象的範圍，不允許滾動條。
if(left & lt；0){
左= 0；
} else if(left & gt；window . inner width-drag . offsetwidth){
left = window . inner width-drag . offsetwidth；
}
if(top & lt；0){
top = 0；
} else if(top & gt；window . inner height-drag . offset height){
top = window . inner height-drag . offset height；
}
//再次獲取物體移動時的距離，解決拖動時晃動的現象。
drag . style . left = left+' px '；
drag . style . top = top+' px '；
};
文檔。onmouseup = function(e){//鼠標彈起時，停止移動。
this.onmousemove = null
this.onmouseup = null//防止鼠標彈跳後循環(也就是防止鼠標放上去的時候不動)
//修復較低版本的ie bug
if(typeof drag.releaseCapture！= '未定義'){
drag . release capture()；
}
};
};
};相信看完這個案例，妳已經掌握了方法。更多精彩請關註Gxl上其他相關文章！
推薦閱讀:
Vue做短信驗證碼註冊功能。
如何使用Angular將組件聯機