两个小块随鼠标拖动_html,类练习

最新推荐文章于 2023-10-12 16:25:39 发布

无名之辈无名之辈

最新推荐文章于 2023-10-12 16:25:39 发布

阅读量172

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ice_stone_kai/article/details/110296291

版权

前端专栏收录该内容

81 篇文章 1 订阅

订阅专栏

如图:
在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 0;
            color: white;
        }

        .left {
            left: 0;
        }

        .right {
            right: 0;
        }
    </style>
</head>
<body>

<div id="div1" class="box left">DIV1</div>

<div id="div2" class="box right">DIV2</div>

<script>
    class Drag {
        constructor(id) {
            this.oDiv = document.querySelector(id);
            this.disx = 0;
            this.disy = 0;
            this.init();
        }

        init() {
            this.oDiv.onmousedown = function (ev) {
                this.disx = ev.clientX - this.oDiv.offsetLeft;
                this.disy = ev.clientY - this.oDiv.offsetTop;
                document.onmousemove = this.fnMove.bind(this);
                document.onmouseup = this.fnUp.bind(this);
                return false;
            }.bind(this);
        }

        fnMove(ev) {
            this.oDiv.style.left = ev.clientX - this.disx + 'px';
            this.oDiv.style.top = ev.clientY - this.disy + 'px';
        }

        fnUp() {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }

    // 子类:限制范围
    class LimitDrag extends Drag {
        fnMove(ev) {
            super.fnMove(ev);
        }
    }

    new Drag('#div1');
    new LimitDrag('#div2');

</script>
</body>
</html>

无名之辈无名之辈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
两个小块随鼠标拖动_html,类练习

如图:代码:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
复制链接

扫一扫