JS 实现 div 自由拖拽
实现鼠标可以自由拖拽页面中的元素（比如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);
}
感谢分享 有用
发表评论