原生JS中的拖拽方法继承

越陌度阡

发布于 2020-11-26 15:20:57

5K0

发布于 2020-11-26 15:20:57

给大家分享一个用原生JS编写的拖拽及拖拽方法继承的小Demo，代码如下。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS中的拖拽方法继承</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }

        #div2 {
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
        }
    </style>
    <script>
        // 定义拖拽父级对象
        function Drag(id) {
            var that = this;
            this.disX = 0;
            this.disY = 0;
            this.oDiv = document.getElementById(id);
            this.oDiv.onmousedown = function (ev) {
                that.fnDown(ev);
                return false;
            };
        };


        // 拖拽父级对象原型上添加鼠标落下时的方法
        Drag.prototype.fnDown = function (ev) {
            var that = this;
            var oEvent = ev || event;
            this.disX = oEvent.clientX - this.oDiv.offsetLeft;
            this.disY = oEvent.clientY - this.oDiv.offsetTop;
            document.onmousemove = function (ev) {
                that.fnMove(ev);
            };
            document.onmouseup = function () {
                that.fnUp();
            };
        };

        // 拖拽父级对象原型上添加鼠标移动时的方法
        Drag.prototype.fnMove = function (ev) {
            var oEvent = ev || event;
            this.oDiv.style.left = oEvent.clientX - this.disX + 'px';
            this.oDiv.style.top = oEvent.clientY - this.disY + 'px';
        };

        // 拖拽父级对象原型上添加鼠标抬起时的方法
        Drag.prototype.fnUp = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        };
    </script>
    <script>
        // 拖拽子对象的方法
        function LimitDrag(id) {
            // 调用父级对象
            Drag.call(this, id);
        };

        // 继承父级对象的原型
        LimitDrag.prototype = Drag.prototype;

        // 修改父级对象上拖拽鼠标移动时的方法，添加边界限制
        LimitDrag.prototype.fnMove = function (ev) {

            var oEvent = ev || event;
            var l = oEvent.clientX - this.disX;
            var t = oEvent.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) {
                t = document.documentElement.clientHeight - this.oDiv.offsetHeight;
            };
            this.oDiv.style.left = l + 'px';
            this.oDiv.style.top = t + 'px';
        };

    </script>


    <script>
        window.onload = function () {
            // div1在拖动过程中没有边界限制
            new Drag('div1');
            // div2在拖动过程中通过将方法改写加上边界限制
            new LimitDrag('div2');
        };
    </script>

</head>

<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/08/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

继承