<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
<!-- 封装一个cookie 封装我放到末尾-->
<script src="../cookie/cookie.js"></script>
</head>
<body>
<div class="box"></div>
<script>
class Grate{
constructor(){
//绑定事件
this.ele = document.querySelector(".box");
//设置this 指向，解决this拿不到正确对象问题
this.m =this.move.bind(this);
this.u =this.up.bind(this);
this.addEvent();
this.getCookie();
}
getCookie(){
//页面开或刷新时，判断Cookie是否有存储位置，没有设置为左上角
var obj=getCookie("obj") ? JSON.parse(getCookie("obj")):{left:0,right:0};
// console.log(obj)
this.ele.style.left= obj.left +"px";
this.ele.style.top= obj.top +"px";
}
addEvent(){
//设置事件监听
this.ele.addEventListener("mousedown",this.down.bind(this));
}
down(eve){
//绑定事件，触发事件
this.downE = eve || window.event;
document.addEventListener("mousemove",this.m);
document.addEventListener("mouseup",this.u);
}
move(eve){
//拖拽
// console.log(this);
var e = eve ||window.event;
this.ele.style.left = e.clientX - this.downE.offsetX +"px";
this.ele.style.top = e.clientY -this.downE.offsetY +"px";
}
up(){
//鼠标抬起，解除绑定
// console.log(this);
document.removeEventListener("mousemove",this.m);
document.removeEventListener("mouseup",this.u);
this.setDate();
}
setDate(){
//存储数据
//console.log(this.ele.offsetLeft);
let obj = {
left:this.ele.offsetLeft,
top:this.ele.offsetTop,
};
console.log(obj);
setCookie("obj",JSON.stringify(obj));
}
}
new Grate();
</script>
<script>
//存
function setCookie(key,val,ops){
ops = ops ||{};
let exp="";
if(ops.expires){
let d =new Date();
d.setDate(d.getDate()+ops.expires);
exp=`;expires=`+d;
}
let p =ops.path ? ";path=" +ops.path :"";
document.cookie =`${key}=${val}`+p+exp;
}
//取
function getCookie(key){
let arr = document.cookie.split("; ");
for(let i=0;i<arr.length;i++){
if(arr[i].split("=")[0] === key){
return arr[i].split("=")[1];
}
}
return "";
}
//删
function removeCookie(key,ops){
ops = ops || {};
ops.expires = -1;
setCookie(key,"1",ops)
}
</script>
</body>
</html>
