<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{
width: 200px;
height: 200px;
border: 1px solid #ccc;
position: absolute;
top: 20%;
left: 10%;
}
#tops{
width: 200px;
height: 30px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="box">
<div id="tops"></div>
</div>
</body>
<script>
let box=document.getElementById('box')
let tops=document.getElementById('tops')
//鼠标在拖动条上按下
tops.onmousedown=(event)=>{
console.log(event)
let e=event ||window.event
//获取鼠标在页面上的位置
let pageX=e.pageX || e.clientX+document.documentElement.scrollLeft;
let pageY=e.pageY || e.clientY+document.documentElement.scrollTop
//获取鼠标在按下一瞬间在盒子中的位置
let boxX=pageX-box.offsetLeft
let boxY=pageY-box.offsetTop
//鼠标在页面上移动,让box也跟着移动
document.onmousemove=(event)=>{
let e=event ||window.event
//获取鼠标在页面上的位置
let pageX=e.pageX ||e.clientX+document.documentElement.scrollLeft;
let pageY=e.pageY ||e.clientY+document.documentElement.scrollTop;
//让box跟着鼠标移动
box.style.left=pageX+'px'
box.style.top=pageY+'px'
}
}
document.onmouseup=()=>{
document.onmousemove=null
}
</script>
</html>