<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.fours{
position: absolute;
width: 200px;
height: 200px;
background: orange;
border-radius: 50%;
box-shadow: -3px 4px 7px #ccc;
}
</style>
<body>
<div class="fours">
</div>
</body>
<script>
let fours=document.querySelector('.fours');
let has=false,offsetX=0,offsetY=0;
let c=function(c){
console.log(c)
}
fours.onmousedown=function(e){
has=true;
// 自身鼠标所在容器边框内的偏移量=鼠标点击位置相对于网页左上角的水平偏移量-当前div盒子左侧距离网页靠左的水平偏移量
offsetX=e.pageX-this.offsetLeft;
offsetY=e.pageY-this.offsetTop;
c('目标开始移动')
}
window.onmousemove=function(e){
// 阻止默认行为
e.preventDefault();
if(has){
c('目标正在移动中···')
// 可移动最大值=可视宽度-div的宽度值
let maxLeft=window.innerWidth-fours.offsetWidth;
let maxTop=window.innerHeight-fours.offsetHeight;
let x=e.clientX-offsetX;
let y=e.clientY-offsetY;
// 当移动值小于0是，移动值为0，防止移动在外部
if(x<0) x=0;
if(y<0) y=0;
if(x>maxLeft) x=maxLeft;
if(y>maxTop) y=maxTop;
fours.style['left']=x+'px';
fours.style['top']=y+'px';
}
}
fours.onmouseup=function(e){
has=false;
c('目标结束！')
}
fours.onmouseleave=function(e){
has=false;
c('目标结束！')
}
</script>
</html>
网友评论