<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子随着鼠标移动</title>
<style>
#demon{
width: 300px;
height: 300px;
background: #ccc;
position: absolute; /* 必须给它一个absolute，否则没有效果 */
}
</style>
</head>
<body>
<div id="demon">
</div>
<script>
// 先画个定位的DIV
// 监听mousedown mouseup mousemove
// 定义一个变量来标记是否按下
// 在move中判断如果按下，则将鼠标位置赋值给div
// 按下时记录鼠标与div的相对位置，移动时减去这段距离
// 在move时阻止默认行为，防止拖动文字有bug
// 监听blur事件，防止窗口失去焦点导致bug
// 防止div出页面，设置maxLeft maxTop
let demon=document.querySelector("#demon")
let canMove=false
let x=0,y=0
demon.onmousedown=function(e){
canMove=true
// 鼠标位置减去当前盒子的位置
x=e.pageX-demon.offsetLeft
y=e.pageY-demon.offsetTop
}
demon.oncontextmenu=function(e){
e.preventDefault();
console.log("右键了");
}
setTimeout(() => {
alert(1)
}, 2000);
window.onmouseup=function(){
canMove=false
}
window.onblur=function(){
canMove=false
}
window.onmousemove=function(e){
e.preventDefault()//阻止默认行为
if(canMove){
let left=e.pageX-x
let top=e.pageY-y
if(left<0) left=0
if(top<0) top=0
let maxLeft=window.innerWidth-demon.offsetWidth
let maxTop=window.innerHeight-demon.offsetHeight
if(left>maxLeft) left-maxLeft
if(top>maxTop) top=maxTop
demon.style.left=left+"px"
demon.style.top=top+"px"
}
}
</script>
</body>
</html>
