弹窗drag 拖拽

最新推荐文章于 2024-08-11 16:20:52 发布

十八流选手益达张

最新推荐文章于 2024-08-11 16:20:52 发布

阅读量87

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u013108007/article/details/108692765

版权

javascript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

     let drag = {
            init(Dom) {
                this.targetDom = Dom
                this.dragDrop();
            },
            dragDrop() {
                this.targetDom.onmousedown = (e) => {
                    console.log(e)
                    let lastX = e.clientX;
                    let lastY = e.clientY;
                    
                    document.onmousemove = (e) => {
                        let newX = e.clientX;
                        let newY = e.clientY;

                        let disX = newX - lastX;
                        let disY = newY - lastY;
                        console.log(disX,disY)
                        let newLeft = disX + this.targetDom.offsetLeft;
                        let newTop = disY + this.targetDom.offsetTop;
                        this.targetDom.style.left = newLeft + 'px';
                        this.targetDom.style.top = newTop + 'px';
                        lastX = newX;
                        lastY = newY;
                    }
                }
                this.targetDom.addEventListener("mouseup", () => {
                    document.onmousemove = null;
                })
            },

        }

        let Dom = document.querySelector(".drag")
        drag.init(Dom)