实现一个div的拖拽效果

最新推荐文章于 2025-06-20 08:41:11 发布

IT新时代

最新推荐文章于 2025-06-20 08:41:11 发布

阅读量6.1k

点赞数

CC 4.0 BY-SA版权

文章标签： div 前端前端开发 web前端网页制作

本文链接：https://blog.youkuaiyun.com/llll789789/article/details/98245608

本文介绍了如何在前端实现div元素的拖拽功能。通过记录鼠标按下时的坐标和元素位置，结合鼠标移动的距离更新元素位置，从而实现div的拖动效果。详细代码展示在内容中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现思路：

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

代码：

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);
})()
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路