web前端入门到实战：实现一个div的拖拽效果

最新推荐文章于 2024-10-02 12:33:47 发布

魔方编程

最新推荐文章于 2024-10-02 12:33:47 发布

阅读量1.1k

点赞数 1

文章标签： div 前端 web前端前端基础网页制作

本文链接：https://blog.csdn.net/wewfdf/article/details/100559660

版权

本文介绍了一种实现div拖拽效果的方法，包括思路和代码实现。通过记录鼠标按下时的位置和元素初始位置，计算鼠标移动距离并更新元素位置，达到拖拽效果。适合前端初学者和网页制作人员参考。

摘要由CSDN通过智能技术生成

实现思路：

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

代码：

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
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&