拖拽事件原生js和面向对象编程(封装和继承)

矫情吗；* 2021-09-15 19:14 279阅读 0赞

面向对象编程

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <style>
        #div {
            width: 200px;
            height: 200px;
            background: yellow;
            position: absolute;
        }
    
        #div2 {
            width: 200px;
            height: 200px;
            background: blue;
            position: absolute;
        }
    </style>
    
    <body>
        <div id="div">面向对象1</div>
        <div id="div2">面向对象2</div>
    </body>
    <script>
        window.onload = function () {
            new Drag('div');
            new ChildDrag('div2')
    
        }
    
        //下面为封装
        function Drag(id) { //构造函数(属性写这里面)
            var _this = this;
            this.disX = 0;
            this.disY = 0;
            this.oDiv = document.getElementById(id);
            this.oDiv.onmousedown = function (e) {
                _this.fnDown(e);
                return false;
            }
        }
    
        Drag.prototype = { //面向对象编程(方法写这里面,因为方法复用性共用性高)
            constructor: Drag,
            fnDown: function (e) {
                var _this = this;
                var oE = e;
                // var disX=oE.clientX-oDiv.offsetLeft;
                // var disY=oE.clientY-oDiv.offsetTop;
                this.disX = oE.offsetX; //一样的
                this.disY = oE.offsetY;
                document.onmousemove = function (e) {
                    _this.fnMove(e);
                }
                document.onmouseup = function () {
                    _this.fnUp();
                }
            },
            fnMove: function (e) {
                var oE = e;
                this.oDiv.style.left = oE.clientX - this.disX + 'px';
                this.oDiv.style.top = oE.clientY - this.disY + 'px';
            },
            fnUp: function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
    
    
        // Drag.prototype.fnDown = function (e) {
        //     var _this = this;
        //     var oE = e;
        //     // var disX=oE.clientX-oDiv.offsetLeft;
        //     // var disY=oE.clientY-oDiv.offsetTop;
        //     this.disX = oE.offsetX; //一样的
        //     this.disY = oE.offsetY;
        //     document.onmousemove = function (e) {
        //         _this.fnMove(e);
        //     }
        //     document.onmouseup = function () {
        //         _this.fnUp();
        //     }
        // }
        // Drag.prototype.fnMove = function (e) {
    
        //     var oE = e;
        //     this.oDiv.style.left = oE.clientX - this.disX + 'px';
        //     this.oDiv.style.top = oE.clientY - this.disY + 'px';
        // }
        // Drag.prototype.fnUp = function () {
    
        //     document.onmousemove = null;
        //     document.onmouseup = null;
        // } 
        //继承
        function ChildDrag(id) {
            Drag.call(this, id); //继承属性
        }
        for (var i in Drag.prototype) { //继承方法
            ChildDrag.prototype[i] = Drag.prototype[i]
        }
    
        //重写
        ChildDrag.prototype.fnMove = function (e) {
    
            var oE = e;
            var l = oE.clientX - this.disX;
            var t = oE.clientY - this.disY;
    
            if (l < 0) {
                l = 0;
            } else if (l > document.documentElement.clientWidth - this.oDiv.offsetWidth) {
    
                l = document.documentElement.clientWidth - this.oDiv.offsetWidth;
            }
            if (t < 0) {
                t = 0;
            } else if (t > document.documentElement.clientHeight - this.oDiv.offsetHeight) {
    
                l = document.documentElement.clientHeight - this.oDiv.offsetHeight;
            }
            this.oDiv.style.left = l + 'px';
            this.oDiv.style.top = t + 'px';
        }
    </script>
    
    </html>