JS实现拖拽效果(内含源码)
前言
本文主要讲解Js如何实现拖拽效果。把一个方块利用鼠标移动到屏幕内其他位置。
鼠标事件与拖拽关系
想要实现拖拽效果,那鼠标事件是必不可少的,接下来对Js当中所有鼠标事件以及如何触发进行一个说明讲解,以便于在下文对拖拽代码讲解时更顺畅一些。
常用鼠标事件
- onmousemove:鼠标移动事件,即鼠标在页面或被监听的元素中移动即可触发。
- onmousedown:鼠标按下事件,鼠标点击时候可分两步,按下和抬起,这个事件在鼠标按下时即可触发,不需等待抬起。
- onmouseup:鼠标抬起事件,这个为鼠标按下后的抬起才会触发,如果不抬起则不会触发,onmouseup和onmousedown连在一起则为click点击事件。
- onmouseenter:鼠标移入时触发,如果绑定在页面上,则移入页面就触发一次,如果绑定在某元素,则移入该元素中则触发一次。
- onmouseout:鼠标移出时触发,如果绑定在页面上,则移出页面就触发,如果绑定在某元素中,则移出该元素就触发一次。onmouseenter和onmouseout常常联合使用。
实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="square" style="width:200px;height:200px;border:1px solid gray;"></div>
<script>
let square=document.getElementById('square')
document.onmousedown=function(e){
console.log('当鼠标被按下时即可触发')
}
document.onmousemove=function(e){
console.log('当鼠标移动时即可触发')
}
square.addEventListener('mouseout',function(e){
console.log('当鼠标移出时即可触发')
})
square.addEventListener('mouseenter',function(e){
console.log('当鼠标移入时即可触发');
})
document.onmouseup=function(e){
console.log('鼠标抬起时触发')
}
document.
</script>
</body>
</html>
注:鼠标移入为了不混淆页面移入移出和某个元素内移入移出,所以给id为square加了一个鼠标移入移出加了监听事件,而不是对整个页面加了移入移除监听事件。
拖拽效果实现流程
- 创建一个id为square的DOMdiv,作为拖拽对象,并给它赋初始CSS,用position:absolute以及top、left对它的初始位置进行定义。并设置宽高、背景颜色等。
- js中定义两个值,一个布尔值,一个square,前者是用于判断在监听鼠标移动事件时鼠标是否被按下,是则true,不是则false。square被id为square的元素进行赋值。
- 创建三个鼠标监听,分别为鼠标按下(down)、移动(move)、松开(up)事件。
- 鼠标按下调用down监听,首先让布尔值为true,也就是确定鼠标已按下,并且对该对象添加四个属性mouseX,mouseY,startX,startY分别把pageX、pageY、square元素距离页面左侧长度offsetLeft、上部长度offsetTop分别赋值进去。按下事件的作用就这些。
- 按下后移动则实现拖拽,移动监听事件首先判断布尔是否为true,如果为true则直接下一步,定义两个变量left,top,分别装的是当前移动后的鼠标对标元素的真实位置,这个位置是由三个属性计算得来,分别为鼠标距离页面距离,初始鼠标距离页面距离以及元素对页面距离,计算后加上px分别赋值给top和left,false则直接退出该监听函数,
- 最后就是松开函数,松开函数唯一的作用,就是把布尔值变为false,也就是未按下状态,这样在未按下状态监听移动函数就不会继续执行,只会在第一层判断时就退出移动函数。
拖拽效果源码及其文字讲解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding:0;
margin:0;
}
#square{
width:100px;
height:100px;
border-radius:10px;
background-color: #2e93ff;
position: absolute;
top:10px;
left:10px;
}
</style>
</head>
<body>
<div id="square"></div>
<script>
let isDown=false;
let square=document.getElementById('square')
square.addEventListener('mousedown',function(e){
isDown=true;
this.mouseX=e.pageX;
this.mouseY=e.pageY;
this.startX=square.offsetLeft
this.startY=square.offsetTop
// console.log(square.offsetLeft,square.offsetTop);
})
square.addEventListener('mousemove',function(e){
if(!isDown) return false;
let left=e.pageX-this.mouseX+this.startX
let top=e.pageY-this.mouseY+this.startY
this.style.top=top+'px'
this.style.left=left+'px'
})
square.addEventListener('mouseup',function(e){
isDown=false;
})
// document.οnmοusedοwn=function(e){
// console.log('当鼠标被按下时即可触发')
// }
// document.οnmοusemοve=function(e){
// console.log('当鼠标移动时即可触发')
// }
// square.addEventListener('mouseout',function(e){
// console.log('当鼠标移出时即可触发')
// })
// square.addEventListener('mouseenter',function(e){
// console.log('当鼠标移入时即可触发');
// })
// document.οnmοuseup=function(e){
// console.log('鼠标抬起时触发')
// }
</script>
</body>
</html>
在上述代码中,我们可以完整看到上述实现流程所有内容,这里主要把最难的部门,也就是计算方式给大家讲解一下:
为什么当前鼠标pageX-初始鼠标pageX+元素起始距离页面位置就可以完美的实现元素移动?
这是因为元素与页面的距离=页面与鼠标距离-鼠标与元素距离,而当前pageX-初始鼠标pageX+元素起始距离页面位置即可实现这个操作。