實現鼠標可以自由拖拽頁面中的元素（比如div，圖片等），首先為要拖動的元素設置 css 為絕對定位（或者使用transform，但使用絕對定位更常見），然后需要用到三個事件：mousedown, mousemove 和 mouseup。
實現思路：
a) 頁面中添加一個div，作為容器，容易的class 設置為 container，并將其設置為相對定位；
b) 在 container 中添加一個div，作為拖拽的目標，并將其設置為絕對定位；
c) 給推拽目標添加 mousedown 事件，mousedown 事件記錄鼠標按下的坐標；
d) mousedown 函數中，注冊 mousemove 和 mouseup 事件;
e) mousemove 事件中，記錄鼠標坐標，并與mousedown事件的起始坐標計算，得出移動的距離，根據這個距離重新給拖拽目標設置定位；
f) mouseup 事件中取消 mousemove、mouseup 事件。
具體實現
HTML
<div class="container"> <div class="el"></div></div>
CSS
.container {position: relative; width: 100vw; height: 100vh; } el {position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: red;}
JS
var el = document.querySelector('.el');el.addEventListener('mousedown', mouseDown);var startX, startY, offsetX, offsetY;function mouseDown(e){ startX = e.clientX; startY = e.clientY; offsetX = el.offsetLeft; offsetY = el.offsetTop; document.addEventListener('mousemove', mouseMove); document.addEventListener('mouseup', mouseUp);}function mouseMove(e){ var x = e.clientX - startX; var y = e.clientY - startY; el.style.left = offsetX + x + 'px'; el.style.top = offsetY + y + 'px';}function mouseUp(e){ document.removeEventListener('mousemove', mouseMove); document.removeEventListener('mouseup', mouseUp);}
?
閱讀原文：原文鏈接
該文章在 2025/7/1 23:26:34 編輯過
400 186 1886
