<!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>
<Style>
#wrap {
position: absolute;
width: 200px;
top: 0;
left: 0;
height: 200px;
border: 1px solid green;
background-image: url('./pic.jpg');
background-size: 100% 100%；
}
img {
width: 100%;
height: 100%;
}
</Style>
</head>
<body>
<div id='wrap'></div>
<script>
var drag = {
dragbox: function () {
var y = 0,
x = 0;
var node = document.getElementById('wrap')
node.style.top = Number(localStorage.getItem('y')) - node.offsetHeight / 2 + 'px'
node.style.left = Number(localStorage.getItem('x')) - node.offsetWidth / 2 + 'px'//读取本地存储的位置信息给div设置位置
node.onmousedown = function (e) {
node.onmousemove = function (e) {
y = e.clientY;
x = e.clientX;
console.log(x, y)
node.style.top = y - node.offsetHeight / 2 + 'px'
node.style.left = x - node.offsetWidth / 2 + 'px'
document.onmouseup = function () {
localStorage.setItem('x', x)
localStorage.setItem('y', y)
node.onmousemove = null;
}
}
}
}
}
drag.dragbox()
</script>
</body>
</html>
