javascript - 以编程方式调整 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 按下的 handle ，并检查用户是否通过拖动 按住鼠标。

然后，当用户在 document 中移动鼠标并按住鼠标(拖动)时，它将移动 #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;
});