前端页面拖拽实例（css+js实现）
程序员文章站
2022-04-01 11:23:29
鼠标拖动方块，并限制出界：实现效果：html 文件 Document
鼠标拖动方块对象，并限制出界：
实现效果：
html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="box"></div>
<script src="./src/script.js"></script>
</body>
</html>
css 文件
* {
margin: 0px;
padding: 0px;
}
#box {
width: 50px;
height: 50px;
background-color: blueviolet;
position: absolute;
}
js 文件
// 获取到要拖拽的对象
const oDiv = document.getElementById('box');
function limitDrag(node) {
node.onmousedown = function (ev) {
let e = ev || window.event;
// 获取鼠标到 node 左上角的相对位置
let offSetX = e.clientX - node.offsetLeft;
let offSetY = e.clientY - node.offsetTop;
document.onmousemove = function (ev) {
let e = ev || window.event;
// 鼠标移动时，计算 node 左上角应该在的位置
let x = e.clientX - offSetX;
let y = e.clientY - offSetY;
// 限制出界
// 获取当前窗口的宽高
let Width = document.documentElement.clientWidth || document.body.clientWidth;
let Height = document.documentElement.clientHeight || document.body.clientHeight;
if (x <= 0) {
x = 0;
}
if (x >= Width - node.offsetWidth) {
x = Width - node.offsetWidth
}
if (y <= 0) {
y = 0;
}
if (y >= Height - node.offsetHeight) {
y = Height - node.offsetHeight
}
node.style.left = x + 'px';
node.style.top = y + 'px';
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
limitDrag(oDiv);