js把盒子拖拽封装为class类

最新推荐文章于 2023-04-30 19:27:15 发布

清酒独酌

最新推荐文章于 2023-04-30 19:27:15 发布

阅读量165

点赞数

分类专栏： javascript 文章标签： javascript 前端 css html

本文链接：https://blog.csdn.net/yang68668/article/details/121375246

版权

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #box {
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
    
        /* 创建类 */
        class Drag {
            /* 构造器 */
            constructor(el) {
                    this.el = el
                    this.init();
                }
                /* 鼠标按下的方法 */
            Down(e) {
                    /* 获取鼠标按下的位置 */
                    var x = e.offsetX;
                    var y = e.offsetY;
                    /* 绑定鼠标移动事件 */
                    document.onmousemove = this.Move.bind(this, x, y)
                }
                /* 鼠标移动的方法 */
            Move(x, y, e) {
                    //盒子横坐标等于 与页面的距离-鼠标在盒子上按下的位置。
                    this.el.style.left = e.pageX - x + 'px'
                        //盒子纵坐标等于 与页面的距离-鼠标在盒子上按下的位置。
                    this.el.style.top = e.pageY - y + 'px'
                }
                /* 鼠标抬起的方法 */
            Up() {
                    /* 解绑移动事件 */
                    document.onmousemove = null;
                }
                /* 绑定事件 */
            init() {
                /* 绑定按下事件 */
                this.el.onmousedown = this.Down.bind(this)
                    /* 绑定抬起事件 */
                document.onmouseup = this.Up;
            }
        }
        /* 获取box */
        var box = document.getElementById('box')
            /* 调用 */
        var a = new Drag(box);
    </script>
</body>