js原生拖拽（定位实现用了开关思想）

78 阅读 0 评论 52 点赞

我是靠谱客的博主淡定豌豆，这篇文章主要介绍js原生拖拽（定位实现用了开关思想），现在分享给大家，希望可以做个参考。

思路（建议先了解开关思想）

拖拽

分析行为:
鼠标移动的时候, 能让 box 跟随移动
鼠标按下以后的移动, 能让 box 跟随移动
鼠标抬起以后的移动, 不需要 box 跟随移动

分析需求:
需要绑定三个事件
=> mousedown : 让 mousemove 的代码可以执行
=> mouseup : 让 mousemove 的代码不可以执行
=> mousemove : 跟随移动
需要给谁绑定事件
=> mousedown : box
=> mouseup : box
=> mousemove : document
如何实现
=> 方案1:
-> 把 move 事件放在 down 事件内进行绑定
-> 把 move 事件在 up 事件内解绑
=> 方案2: 开关（解决bug)
-> 核心, move 事件的代码不执行
-> 准备一个开关, 默认是关闭
-> 在按下的时候打开
-> 在抬起的时候关闭
-> 在移动的时候, 判断, 如果是打开的就执行代码, 如果是关闭的就不执行代码

直接上代码(代码有详细注释）

复制代码

<!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>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: springgreen;
/* 给定位脱离文档流 */
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<script>
let box = document.querySelector("div")
//鼠标按下事件,鼠标移动事件 => 注意:鼠标移动的过程当中,一定是先鼠标先按下,然后才可以移动
box.onmousedown = function(e){
//鼠标按下,其实就是鼠标在移动前,我们要获取鼠标开始的坐标
let startX = e.offsetX
let startY = e.offsetY
//鼠标移动过程当中
document.onmousemove = function(e){
//鼠标在移动的过程当中,其实就是盒子要根据鼠标移动
//鼠标移动,我们要获取鼠标的坐标
let endX = e.clientX
let endY = e.clientY
//求盒子移动的坐标(鼠标移动的坐标)
let X = endX - startX;
let Y = endY - startY;
/* 拖拽的临界值判断 */
if(X < 50){
X = 0;
}
if(Y<50){
Y=-10;
}
if(X > document.documentElement.clientWidth - box.clientWidth){
X = document.documentElement.clientWidth - box.clientWidth
}
if(Y > document.documentElement.clientHeight - box.clientHeight){
Y = document.documentElement.clientHeight - box.clientHeight
}
//移动的过程当中,盒子的坐标变化
box.style.top = Y + "px"
box.style.left = X + "px"
}
}
//鼠标抬起事件,就是盒子不要移动
document.onmouseup = function(){
//将鼠标移动的事件清空
document.onmousemove = null;
}
</script>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!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>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: springgreen;
/* 给定位脱离文档流 */
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<script>
let box = document.querySelector("div")
//鼠标按下事件,鼠标移动事件 => 注意:鼠标移动的过程当中,一定是先鼠标先按下,然后才可以移动
box.onmousedown = function(e){
//鼠标按下,其实就是鼠标在移动前,我们要获取鼠标开始的坐标
let startX = e.offsetX
let startY = e.offsetY
//鼠标移动过程当中
document.onmousemove = function(e){
//鼠标在移动的过程当中,其实就是盒子要根据鼠标移动
//鼠标移动,我们要获取鼠标的坐标
let endX = e.clientX
let endY = e.clientY
//求盒子移动的坐标(鼠标移动的坐标)
let X = endX - startX;
let Y = endY - startY;
/* 拖拽的临界值判断 */
if(X < 50){
X = 0;
}
if(Y<50){
Y=-10;
}
if(X > document.documentElement.clientWidth - box.clientWidth){
X = document.documentElement.clientWidth - box.clientWidth
}
if(Y > document.documentElement.clientHeight - box.clientHeight){
Y = document.documentElement.clientHeight - box.clientHeight
}
//移动的过程当中,盒子的坐标变化
box.style.top = Y + "px"
box.style.left = X + "px"
}
}
//鼠标抬起事件,就是盒子不要移动
document.onmouseup = function(){
//将鼠标移动的事件清空
document.onmousemove = null;
}
</script>
</body>
</html>

升级版，增加了盒子临界值判断，还有一点点磁吸表现

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!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>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background-color: springgreen;
/* 给定位脱离文档流 */
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<script>
let box = document.querySelector("div")
//鼠标按下事件,鼠标移动事件 => 注意:鼠标移动的过程当中,一定是先鼠标先按下,然后才可以移动
box.onmousedown = function(e){
//鼠标按下,其实就是鼠标在移动前,我们要获取鼠标开始的坐标
let startX = e.offsetX
let startY = e.offsetY
//鼠标移动过程当中
document.onmousemove = function(e){
//鼠标在移动的过程当中,其实就是盒子要根据鼠标移动
//鼠标移动,我们要获取鼠标的坐标
let endX = e.clientX
let endY = e.clientY
//求盒子移动的坐标(鼠标移动的坐标)
let X = endX - startX;
let Y = endY - startY;
/* 拖拽的临界值判断 */
if(X < 50){
X = 0;
}
if(Y<50){
Y=-10;
}
if(X > document.documentElement.clientWidth - box.clientWidth){
X = document.documentElement.clientWidth - box.clientWidth
}
if(Y > document.documentElement.clientHeight - box.clientHeight){
Y = document.documentElement.clientHeight - box.clientHeight
}
//移动的过程当中,盒子的坐标变化
box.style.top = Y + "px"
box.style.left = X + "px"
}
}
//鼠标抬起事件,就是盒子不要移动
document.onmouseup = function(){
//将鼠标移动的事件清空
document.onmousemove = null;
}
</script>
</body>
</html>