四宮格拖動改變寬高.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";//設(shè)計橫線的左邊距和第一個容器的寬
                        }
                 }; 
                 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%;}