1，代码骨架
一个目标元素：
<div id="app"></div>
给上简单的样式：
宽高，背景色。
绝对定位。
不被选中。
#app {
width: 10rem;
height: 10rem;
background-color: pink;
position: absolute;
user-select: none;
}
效果：
2，两个状态
是否正在拖动：isMoving。
开始拖动时的鼠标相对位置：x，y。
isMoving能控制是移动呢还是不移动。
x，y能让鼠标始终在div的一个固定地方，而不是左上角。
const app = document.getElementById("app")
let moveState = {
isMoving: false,
x: 0,
y: 0
}
3，三个方法
拖动前，拖动中，拖动后。
function beforeMove(e) {
moveState = {
isMoving: true,
x: e.pageX - app.offsetLeft,
y: e.pageY - app.offsetTop
}
}
function move(e) {
if (moveState.isMoving) {
app.style.left = e.pageX - moveState.x + "px"
app.style.top = e.pageY - moveState.y + "px"
}
}
function afterMove(e) {
if (moveState.isMoving) {
moveState.isMoving = false
}
}
4，四个事件
按下。
移动。
离开。
抬起。
app.addEventListener('mousedown', beforeMove)
app.addEventListener('mousemove', move)
app.addEventListener('mouseleave', move)
app.addEventListener('mouseup', afterMove)
5，最终效果
6，全部代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#app {
width: 10rem;
height: 10rem;
position: absolute;
background-color: pink;
user-select: none;
}
</style>
</head>
<body>
<div id="app"></div>
<script>
const app = document.getElementById("app")
let moveState = {
isMoving: false,
x: 0,
y: 0
}
app.addEventListener('mousedown', beforeMove)
app.addEventListener('mousemove', move)
app.addEventListener('mouseleave', move)
app.addEventListener('mouseup', afterMove)
function beforeMove(e) {
moveState = {
isMoving: true,
x: e.pageX - app.offsetLeft,
y: e.pageY - app.offsetTop
}
}
function move(e) {
if (moveState.isMoving) {
app.style.left = e.pageX - moveState.x + "px"
app.style.top = e.pageY - moveState.y + "px"
}
}
function afterMove(e) {
if (moveState.isMoving) {
moveState.isMoving = false
}
}
</script>
</body>
</html>