四宫格拖动改变宽高.gif

javascript

var areaBox = choose("tableArea"), //获取最外围窗口
                leftArea = choose("boxArea");//获取四宫格中的第一个容器
                areBoxW = areaBox.clientWidth;//获取最外围窗口的宽
                areBoxH = areaBox.clientHeight;//获取最外围窗口的高
                lineH = choose("lineHeight"),//获取横的虚线
                lineW = choose("lineWidth");//获取竖的虚线
            lineW.onmousedown = function(e) {
                // 移动容器的宽
                 var disX = (e || event).clientX;//获取鼠标（即横线）当前X轴坐标
                 lineW.left = lineW.offsetLeft;//获取鼠标（即横线）当前左边距
                 document.onmousemove = function(e) { 
                        var iT = lineW.left + ((e || event).clientX - disX);//iT = 横线的左边距 - （鼠标移动后的当前X坐标 - 初始时鼠标（即横线）的X轴坐标
                        var e=e||window.event,tarnameb=e.target||e.srcElement;
                        if(iT <= "100" || areBoxW - iT <= "100"){
                            // 当鼠标移动至最左或最右时释放鼠标
                            document.onmousemove = null;
                            document.onmouseup = null; 
                            lineW.releaseCapture && lineW.releaseCapture();//从当前线程中的窗口释放鼠标捕获，并恢复通常的鼠标输入处理
                            return false
                        }else{
                            lineW.style.left = leftArea.style.width = iT + "px";//设计横线的左边距和第一个容器的宽
                        }
                 }; 
                 document.onmouseup = function() {
                      document.onmousemove = null;
                      document.onmouseup = null; 
                      // lineW.releaseCapture && lineW.releaseCapture()
                 };
                 lineW.setCapture && lineW.setCapture();
                 return false
             };
             lineH.onmousedown = function(e) {
                // 移动容器的高
                 var disY = (e || event).clientY;
                 lineH.top = lineH.offsetTop;
                 document.onmousemove = function(e) { 
                      var iT = lineH.top + ((e || event).clientY - disY);
                      var e=e||window.event,tarnameb=e.target||e.srcElement;
                      console.log(areBoxH);
                      console.log(iT);
                        if(iT <= "70" || areBoxH - iT <= "70"){
                            document.onmousemove = null;
                            document.onmouseup = null; 
                            lineH.releaseCapture && lineH.releaseCapture()
                            return false
                        }else{
                            lineH.style.top = leftArea.style.height =  iT + "px";
                        }
                 }; 
                 document.onmouseup = function() {
                      document.onmousemove = null;
                      document.onmouseup = null; 
                      lineH.releaseCapture && lineH.releaseCapture()
                 };
                 lineW.setCapture && lineW.setCapture();
                 return false
             };
function choose(id){
    return document.getElementById(id);
};

html

    <div class="wrapper">
        <table id="tableArea" class="table-area" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td id="boxArea">
                    <div class="area"><div class="area-title">公告</div></div>
                </td>
                <td>
                    <div class="area"><div class="area-title">公告</div></div>
                </td>
            </tr>
            <tr>
                <td>


                    <div class="area"><div class="area-title">公告</div></div>
                </td>
                <td>
                    <div class="area"><div class="area-title">公告</div></div>
                </td>
            </tr>
        </table>
        <div id="lineHeight" class="drag-line-h"></div>
        <div id="lineWidth" class="drag-line-w"></div>
    </div>

css

body{background:#F2F3F4;}
body,html,.wrapper,#tableArea,#tableArea td .area{margin:0;padding:0;height:100%;width:100%;}
.wrapper{position:relative;}
#tableArea td{padding:10px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
.area{background:#fff;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;position:relative;}
.area-title{font-size:14px;border-bottom:1px solid #d9d9d9;width:97%;margin:0 auto;height:45px;line-height:45px;position:relative;}
.area-title:after{content:"";position:absolute;width:3px;height:40%;top:30%;background:#54ACF1;left:-1.5%;}
.drag-line-h,.drag-line-w{position:absolute;z-index:1;cursor:move;}
.drag-line-h{width:100%;border-bottom:2px dashed #83dee4;left:0;top:50%;}
.drag-line-w{height:100%;border-left:2px dashed #83dee4;top:0;left:50%;}