JS 实现 div 自由拖拽
|
admin
2025年6月28日 23:45
本文热度 1029
|
实现鼠标可以自由拖拽页面中的元素（比如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
