<!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;
position: absolute;
background: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
// 获取元素
var div=document.querySelector('div')
// 盒子点击时
div.onmousedown=function(e){
var dx=e.pageX-div.offsetLeft
var dy=e.pageY-div.offsetTop
document.onmousemove=function(e){
var x=e.pageX-dx;
var y=e.pageY-dy;
div.style.left=x+'px'
div.style.top=y+'px'
// 本地存储
localStorage.getItem("x",x)
localStorage.getItem("y",y)
// 鼠标失去光标时不移动
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
}
onload=()=>{
div.style.left=localStorage.getItem("x")+'px'
div.style.top=localStorage.getItem("y")+'px'
}
</script>
</html>
}
}
onload=()=>{
div.style.left=localStorage.getItem("x")+'px'
div.style.top=localStorage.getItem("y")+'px'
}