ES6類的使用

ES6類的使用

<!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>