如果要設定物體拖拽，那麼必須使用三個事件，並且這三個事件的使用順序不能顛倒。
onmousedown：滑鼠按下事件
onmousemove：滑鼠移動事件
onmouseup：滑鼠抬起事件
拖拽的基本原理就是根據滑鼠的移動來移動被拖拽的元素。滑鼠的移動也就是x、y座標的變化;元素的移動就是style.position的 top和left的改變。當然，並不是任何時候移動滑鼠都要造成元素的移動，而應該判斷滑鼠左鍵的狀態是否為按下狀態，是否是在可拖拽的元素上按下的。
基本思路如下：
拖拽狀態 = 0滑鼠在元素上按下的時候
滑鼠在元素上移動的時候
滑鼠在任何時候放開的時候
部分例項**：
html
部分
**********
部分
.calculator部分
window.onload = function()
document.onmousemove = function(e) else if(left >window.innerwidth-drag.offsetwidth)
if(top<0)else if(top >window.innerheight-drag.offsetheight)
//移動時重新得到物體的距離，解決拖動時出現晃動的現象
drag.style.left = left+ 'px';
drag.style.top = top + 'px';
};document.onmouseup = function(e)
};};};
author:致知
sign:路漫漫其修遠兮，吾將上下而求索。
原生JS拖拽
想要讓整個元素移動需要三個事件 滑鼠按下 onmousedown 滑鼠移動 onmousemove 滑鼠抬起 onmouseup html 登入會員 關閉使用者名稱 登入密碼 登入會員 頁面效果如下 jsvar login document.queryselector login 獲取整個彈框的內容...
原生js實現拖拽盒子
盒子必須是絕對定位的盒子 滑鼠在盒子內部按下時獲得相對座標。事件物件在頁面的位置減去盒子距離body的距離 滑鼠移動時，使得盒子的位置發生變化 滑鼠鬆開時，不再拖動 移動事件失效 lang zh charset utf 8 name viewport content width device wid...
使用js實現拖拽功能
通過監聽mousemove和mouseup事件實現拖拽功能 var screenwidth document.documentelement.clientwidth var screenheight document.documentelement.clientheight document mou...