ES6类的使用

最新推荐文章于 2024-04-12 07:23:50 发布

黑色咖啡 Ken

最新推荐文章于 2024-04-12 07:23:50 发布

阅读量242

点赞数

分类专栏： web前端工程师 javascript ECMAScript 6

本文链接：https://blog.csdn.net/a4561614/article/details/104246934

版权

javascript 同时被 3 个专栏收录

48 篇文章 0 订阅

订阅专栏

ECMAScript 6

33 篇文章 0 订阅

订阅专栏

web前端工程师

24 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>es6类的使用</title>
</head>
<style>
    .box {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        background: #000;
        line-height: 100px;
        color: #fff;
        text-align: center;
        font-size: 15px;
    }
    
    #Drag3 {
        right: 0px;
    }
    
    #Drag1 {
        left: 0px;
    }
    
    #Drag2 {
        left: 50%;
        margin-left: -50px;
    }
</style>

<body>
    <div id="Drag1" class="box left">BOX1</div>
    <div id="Drag2" class="box top">BOX2</div>

</body>
<script>
    class DragFn {
        constructor(id) {
            this.idDom = document.querySelector(id);
            this.idsX = 0;
            this.idsY = 0;
            this.init();
        }
        init() {
            this.idDom.onmousedown = function(event) { //事件会在鼠标按键被按下时发生
                this.idsX = event.clientX - this.idDom.offsetLeft;
                this.idsY = event.clientY - this.idDom.offsetTop;
               
                document.onmousemove = this.fnMoveFn.bind(this); //事件会在鼠标指针移到指定的对象时发生。
                document.onmouseup = this.fnUpFn.bind(this); //事件会在鼠标按键被松开时发生
                return false;
            }.bind(this);
        }
        fnMoveFn(event) {
            this.idDom.style.left = event.clientX - this.idsX + 'px';
            this.idDom.style.top = event.clientY - this.idsY + 'px';

          

            if (this.idDom.offsetLeft <= 0) {
               this.idDom.style.left = 0;
           }
            if (this.idDom.offsetTop <= 0) {
                this.idDom.style.top = 0;
            }
        
             if (this.idDom.offsetRight <= 0) {
                this.idDom.style.right = 0;
            }

        }
        fnUpFn() {
            document.onmousemove = null; //取消时间
            document.onmouseup = null; //取消时间
        }
    }

    //子类继承--限制范围
    class LimitDragFn extends DragFn {
        fnMoveFn(ev) { //子类也有相同的方法 如果要执行父类的方法就得Super 不然会替换父类德方法
            super.fnMoveFn(ev);
           
        }
    }
    new DragFn("#Drag1");
    new LimitDragFn('#Drag2');
</script>

</html>

黑色咖啡 Ken

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ES6类的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>es6类的使用&l...
复制链接

扫一扫