美文网首页网页前端后台技巧(CSS+HTML)Web前端之路码农的世界
前端开发入门到实战:实现一个div的拖拽效果

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

作者: 560b7bb7b879 | 来源:发表于2019-08-14 13:12 被阅读6次

    实现思路:

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

    代码:

    web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
    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);
    })()
    

    自己是一个五年的前端工程师,希望本文对你有帮助!

    这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,每天分享技术

    点击:加入

    相关文章

      网友评论

        本文标题:前端开发入门到实战:实现一个div的拖拽效果

        本文链接:https://www.haomeiwen.com/subject/ihtdrctx.html