マウスドラッグズームパネルサイズ

また完璧ではない実装で、なぜスタイルleftとtopを空に設定すると、ある要素が動いて右下の要素が動かないバグを解決することができますか??

    
    
    
    
    



    

        
Resizable Panel
        
        
    
    
        // 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');
    

慕課網https://www.imooc.com/video/3578/0