用js实现拖拽效果？那不是很简单？但是这个方法你见过吗

本文链接：https://blog.csdn.net/weixin_49256908/article/details/107809213

1、在js中利用面向对象+事件监听方法实现一个简单的拖拽效果，且利用本地存储localstorage记住拖拽的位置，实现刷新页面被拖拽的盒子也可以保持原地不动，下面我们用代码来实现

这是基本布局

<!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>
</head>
<body>
 
    <div class="box"></div>

js代码

<script>

    class Drag{
        constructor(){
            this.ele = document.querySelector(".box");

            将来使用事件监听式绑定事件，为了方便删除，和this指向的正确，需要提前将对应的事件处理函数的this指向改变，并拿到改变之后的新函数，方便删除
            this.m = this.move.bind(this);
            this.u = this.up.bind(this);

             添加事件
            this.addEvent();  

             准备一个读取
            this.getData();
        }
        addEvent(){
             事件处理函数中的this指向事件源，这里的第二个参数是一个回调函数，this隐式丢失，指向了事件源，我们要的是实例，所以用bind强制绑定this的指向实例
            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){
　　　　这里呢我们处理下浏览器兼容问题
            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(){
            document.removeEventListener("mousemove",this.m);
            document.removeEventListener("mouseup",this.u);

             鼠标抬起的时候记录位置，我们这边就准备存一个数据
            this.setData();
        }
        setData(){
            var pos = {
                left:this.ele.offsetLeft,
                top:this.ele.offsetTop
            };
             利用本地存储存，利用json把对象转成字符存进去
            localStorage.setItem("pos",JSON.stringify(pos));
        }
        getData(){
             初始读取本地存储中的坐标
             判断之前是否存过
             存过就转成对象
             没存过就给个默认值：左上角
            var pos = localStorage.getItem("pos") ? JSON.parse(localStorage.getItem("pos")) : {left:0,top:0};
             console.log(pos);
            this.ele.style.left = pos.left + "px"
            this.ele.style.top = pos.top + "px"
        }
    }
     别忘记执行哦
    new Drag;

</script>
</body>
</html>