以编程方式调整H div和C div以及大小调整器

Question

当我单击并拖动（#cssNav）到右侧时，它不会与#html和#css div一起按比例移动。

这可能是非常明显的东西，但还是无法弄清楚，我在这里错过了什么，请帮忙？

注：我不想用display:flex

codepen

$("#htmlNav").on("mousedown", dragStartH); 
 
    $("#cssNav").on("mousedown", dragStartH); 
 
    $("#jsNav").on("mousedown", dragStartH); 
 
    
 
    function dragStartH(e) { 
 
     e.preventDefault(); 
 
     dragMeta = {}; 
 
     dragMeta.pageX0 = e.pageX; 
 
     dragMeta.elem = this; 
 
     dragMeta.offset0 = $(this).offset(); 
 
     dragMeta.codeWindow = "#" + $(e.target).attr("id").replace("Nav", ""); 
 
     function handle_dragging(e) { 
 
      var change = e.pageX - dragMeta.pageX0; 
 
      var left = dragMeta.offset0.left + change; 
 
      $(dragMeta.elem).offset({ left: left }); 
 
      $("#css").width($("#css").width() - change + "px"); 
 
      $("#html").width($("#html").width() + change + "px"); 
 
     } 
 
     function handle_mouseup(e) { 
 
      $("body") 
 
       .off("mousemove", handle_dragging) 
 
       .off("mouseup", handle_mouseup); 
 
     } 
 
     $("body").on("mouseup", handle_mouseup).on("mousemove", handle_dragging); 
 
    } 
 
    
 
    $(document).ready(function() { 
 
     var widthPercent = ($(window).width() - 30)/3; 
 
     $("#html").width(widthPercent + "px"); 
 
     $("#css").width(widthPercent + "px"); 
 
     $("#js").width(widthPercent + "px"); 
 
    });

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.container{ 
 
    width:100%; 
 
    height: 100%; 
 
    background-color:#343; 
 
    display: flex; 
 
    flex-direction: column; 
 
    color: #fff; 
 
    margin: 0; 
 
} 
 
#preview, #code{ 
 
    background-color:#433; 
 
    height: 50%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
#code{ 
 
    border-bottom: #333 solid 2px; 
 
    width: 100% 
 
} 
 
#previewNav, #codeNav{ 
 
    background-color:#bbb; 
 
    height: 10px; 
 
    width: 100%; 
 
    cursor: row-resize; 
 
} 
 
#html{ 
 
    background-color: #BFB; 
 
} 
 
#css{ 
 
    background-color: #FBB; 
 
} 
 
#js{ 
 
    background-color: #BBF; 
 
} 
 
#html, #css, #js{ 
 
    float: left; 
 
    width: 32%; 
 
    height: 100%; 
 
} 
 
#htmlNav, #cssNav, #jsNav{ 
 
    background-color:#bbb; 
 
    float: left; 
 
    height:100%; 
 
    width: 10px; 
 
    cursor: col-resize; 
 
    z-index:10; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
     <div id="codeNav"></div> 
 
     <div id="code"> 
 
      <div id="htmlNav"></div> 
 
      <div id="html">H</div> 
 
      <div id="cssNav"></div> 
 
      <div id="css">C</div> 
 
      <div id="jsNav"></div> 
 
      <div id="js">J</div> 
 
     </div> 
 
     <div id="previewNav"></div> 
 
     <div id="preview">P</div> 
 
    </div>

Answer 1

这是我会怎么做： 跟踪哪些处理按与navType并检查用户是否按住了dragging。

然后，当用户在document移动鼠标，它是向下（dragging）持有其鼠标它将#html，#css和#js相应

更改您的javascript进入这个：

var mouseX, prevMouseX, navType, change; 
var dragging = false; 

$("#cssNav").mousedown(function() { 
    dragging = true; 
    navType = "css"; 
}); 
$("#jsNav").mousedown(function() { 
    dragging = true; 
    navType = "js"; 
}); 

$(document).mousemove(function (e) { 
    mouseX = e.pageX; 
    if(dragging){ 
     e.preventDefault(); 
     change = mouseX - prevMouseX; 
     if(navType == "css" && ($("#css").width() - (change)) > 0 && ($("#html").width() + (change)) > 0){ 
      var hw = $("#html").width(); 
      var cw = $("#css").width(); 
      $("#html").width(hw + change); 
      $("#css").width(cw - change); 
     } else if(navType == "js" && ($("#css").width() + (change)) > 0 && ($("#js").width() - (change)) > 0){ 
      var cw = $("#css").width(); 
      var jw = $("#js").width(); 
      $("#css").width(cw + change); 
      $("#js").width(jw - change); 
     } 
    } 
    prevMouseX = mouseX; 
}).mouseup(function() { 
    dragging = false; 
}).mouseleave(function() { 
    dragging = false; 
});