鼠标拖拽缩放面板大小

最新推荐文章于 2023-06-29 17:58:30 发布

jojo付啾啾

最新推荐文章于 2023-06-29 17:58:30 发布

阅读量1.3k

点赞数

分类专栏： JS html5 CSS 文章标签：鼠标拖拽缩放面板大小

本文链接：https://blog.csdn.net/DreamFJ/article/details/82688015

版权

JS 同时被 3 个专栏收录

116 篇文章 1 订阅

订阅专栏

CSS

52 篇文章 1 订阅

订阅专栏

html5

38 篇文章 0 订阅

订阅专栏

又是一段不完美的实现，为啥设置样式left和top为空就能解决某一边元素动而右下角元素不动的bug？？？

<!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>带蒙层的弹出框</title>
    <style>
        body {
            margin: 0;
            padding: 50px;
            font-size: 14px;
            color: #333;
        }
        
        .panel {
            width: 400px;
            height: 240px;
            border: 1px solid #ccc;
            position: relative;
        }
        
        .title {
            /* width: 100%; */
            /* height: 40px; */
            background-color: #ccc;
            text-align: center;
            line-height: 40px;
            font-weight: bold;
        }
        
        .resizable-r {
            position: absolute;
            right: 0;
            top: 0;
            width: 10px;
            height: 100%;
            background-color: aqua;
            cursor: e-resize;
        }
        
        .resizable-b {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 10px;
            background-color: hotpink;
            cursor: s-resize;
        }
        
        .resizable-rb {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 20px;
            height: 20px;
            background-color: mediumpurple;
            cursor: se-resize;
        }
    </style>
</head>

<body>
    <div class="panel" id="resizable">
        <div class="title">Resizable Panel</div>
        <!-- 需要三个控制元素， 右，下，右下，以下是静态页面，后面需要动态加入-->
        <!-- <div class="resizable-r"></div>
        <div class="resizable-b"></div>
        <div class="resizable-rb"></div> -->
    </div>
    <script>
        // panel面板，ctrl控制元素，type控制元素类型(r,b,rb)
        var m_panel, m_ctrl, m_type;
        // moving鼠标是否按在控制元素，开始拖动；m_start_x/y鼠标相对ctrl的left/top；m_to_y鼠标的新位置
        var moving = 0,
            m_start_x = 0,
            m_start_y = 0,
            m_to_x = 0,
            m_to_y = 0;

        // 为控制元素支持拖拽
        function on_mousedown(e, panel, ctrl, type) {
            var e = e || window.event;
            m_start_x = e.pageX - ctrl.offsetLeft;
            m_start_y = e.pageY - ctrl.offsetTop;
            m_panel = panel;
            m_ctrl = ctrl;
            m_type = type;

            // 开始侦听处理移动事件
            moving = setInterval(on_move, 10);
        }

        function on_move() {
            // 如果鼠标在移动
            if (moving) {
                // 拖动范围限定，这个限定很不合理！！！，还不如直接设一个最小值呢
                var min_left = m_panel.offsetLeft;
                var min_top = m_panel.offsetTop;
                var to_x = m_to_x - m_start_x;
                var to_y = m_to_y - m_start_y;

                to_x = Math.max(to_x, min_left);
                to_y = Math.max(to_y, min_top);

                switch (m_type) {
                    case 'r':
                        m_ctrl.style.left = to_x + 'px';
                        // 加上控制元素的宽度10防止跳动
                        m_panel.style.width = to_x + 10 + 'px';
                        break;
                    case 'b':
                        m_ctrl.style.top = to_y + 'px';
                        m_panel.style.height = to_y + 10 + 'px';
                        break;
                    case 'rb':
                        m_ctrl.style.left = to_x + 'px';
                        m_ctrl.style.top = to_y + 'px';
                        m_panel.style.width = to_x + 20 + 'px';
                        m_panel.style.height = to_y + 20 + 'px';
                        break;
                }
            }
        }

        document.onmousemove = function(e) {
            var e = e || window.event;
            m_to_x = e.pageX;
            m_to_y = e.pageY;
        };
        document.onmouseup = function() {
            clearInterval(moving);
            moving = 0;
            // 解决某一边元素动而右下角元素不动的bug
            var cls = document.getElementsByClassName("resizable-ctrl");
            for (var i = 0; i < cls.length; i++) {
                cls[i].style.left = '';
                cls[i].style.top = '';
            }
        }

        // 为面板加入控制元素
        function Resizable(panel_id) {
            var panel = document.getElementById(panel_id);

            var r = document.createElement('div');
            var b = document.createElement('div');
            var rb = document.createElement('div');

            r.className = "resizable-r resizable-ctrl";
            b.className = "resizable-b resizable-ctrl";
            rb.className = "resizable-rb resizable-ctrl";

            panel.appendChild(r);
            panel.appendChild(b);
            panel.appendChild(rb);

            // 为控制元素设置拖拽处理
            r.addEventListener('mousedown', function(e) {
                on_mousedown(e, panel, r, 'r');
            });
            b.addEventListener('mousedown', function(e) {
                on_mousedown(e, panel, b, 'b');
            });
            rb.addEventListener('mousedown', function(e) {
                on_mousedown(e, panel, rb, 'rb');
            });
        }

        Resizable('resizable');
    </script>
</body>

</html>

慕课网https://www.imooc.com/video/3578/0

jojo付啾啾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标拖拽缩放面板大小

又是一段不完美的实现，为啥设置样式left和top为空就能解决某一边元素动而右下角元素不动的bug？？？&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="
复制链接

扫一扫