localstorage的小应用拖拽

最新推荐文章于 2023-10-05 22:24:28 发布

liantaiyou

最新推荐文章于 2023-10-05 22:24:28 发布

阅读量116

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/liantaiyou/article/details/103672211

版权

<!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>
   //注意一定要设置定位，否则盒子不会移动
        .box1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>
<script>
    class Drag {
        constructor() {
            this.ele = document.querySelector(".box1");
//提前设置好this的指向。将实例中的this指向move，up
            this.m = this.move.bind(this);
            this.u = this.up.bind(this);

            this.init();
            this.addEvent();
        }
        //从最开始盒子移动时就要读取它的位置，进行记录，如果最开始有移动的话就记
        //录，没有移动的话就是空字符（JSON。parse将对象转成字符，因为cookie只能
        //存字符）
        init() {
            this.pos = localStorage.getItem("pos") ? JSON.parse(localStorage.getItem("pos")) : {
                l: 0,
                t: 0
            };
//使盒子的坐标生效
            this.ele.style.left = this.pos.l + "px";
            this.ele.style.top = this.pos.t + "px"
        }
        addEvent() {
//监听式绑定事件
            this.ele.addEventListener('mousedown', this.down.bind(this));
        }
        down(eve) {
//鼠标按下时的坐标
            var e = eve || window.event;
            this.x = e.offsetX;
            this.y = e.offsetY;

            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.x + "px";
            this.ele.style.top = e.clientY - this.y + "px";
        }
        up() {
        //记录移动后的坐标位置，这样刷新页面后盒子还会在移动后的位置。
        //就不会跑到最初的左上角了
            var pos = {
                t: this.ele.offsetLeft,
                l: this.ele.offsetTop
            }
            localStorage.setItem("pos", JSON.stringify(pos))
            //删除移动和抬起事件
            document.removeEventListener('mousemove', this.m)
            document.removeEventListener('mouseup', this.u)


        }
    }
//最后一定要记得执行
    new Drag();
</script>

</html>