<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.a {
width: 200px;
height: 200px;
background: #ccc;
position: absolute;
}
</style>
</head>
<body>
<div class="a"></div>
<script>
let a = document.querySelector('.a')
let isMove = false
let x = 0
let y = 0
a.onmousedown = function (e) {
x = e.pageX - a.offsetLeft
y = e.pageY - a.offsetTop
isMove = true
}
a.onmouseup = function () {
isMove = false
}
a.onmousemove = function (e) {
if (isMove) {
a.style.left = e.pageX-x + 'px'
a.style.top = e.pageY-y + 'px'
}
}
</script>
</body>
</html>
注解:
e.pageX 鼠标X轴位置
a.offsetLeft 元素边框距离父元素内边距的距离
e.pageX - a.offsetLeft记录鼠标点击时,在元素内的位置