本地服务器下的记住记住拖拽位置 

<!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>

 

posted @ 2020-07-14 16:08  讲故事的人zz  阅读(127)  评论(0)    收藏  举报