前台开发入门到实战：实现一个div的拖拽效果

实现思路：

1. 鼠标按下开始拖拽
2. 记录摁下鼠标时的鼠标位置以及元素位置
3. 拖动鼠标记下当前鼠标的位置
4. 鼠标当前位置-摁下时鼠标位置= 鼠标移动距离
5. 元素位置= 鼠标移动距离+鼠标摁下时元素的位置

代码：

class Drag {    //构造函数    constructor(el) {        this.el = el;        //鼠标摁下时的元素位置        this.startOffset = {};        //鼠标摁下时的鼠标位置        this.startPoint = {};        let move = (e) => {            this.move(e);        };        let end = (e) => {            document.removeEventListener("mousemove", move);            document.removeEventListener("mouseup", end);        };        el.addEventListener("mousedown", (e) => {            this.start(e);            document.addEventListener("mousemove", move);            document.addEventListener("mouseup", end);        })    }    //摁下时的解决函数    start(e) {        let { el } = this;        this.startOffset = {            x: el.offsetLeft,            y: el.offsetTop        }        this.startPoint = {            x: e.clientX,            y: e.clientY        }    }    //鼠标移动时的解决函数    move(e) {        let { el, startOffset, startPoint } = this;        let newPoint = {            x: e.clientX,            y: e.clientY        }        let dis = {            x: newPoint.x - startPoint.x,            y: newPoint.y - startPoint.y,        }        el.style.left = dis.x + startOffset.x + "px";        el.style.top = dis.y + startOffset.y + "px";    }}(function () {    let box = document.querySelector("#box");    let dragbox = new Drag(box);})()

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为前台工程师，乃至全栈工程师的路上披荆斩棘。在这里给大家推荐一个前台全栈学习圈：784783012 欢迎大家进群交流探讨，学习交流，共同进步。
当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终白费大量时间，所以有效资源还是很有必要的。