Javascript 通过编程调整H div和C div的大小以及大小调整器

当我单击向右拖动（#cssNav）时，它不会与#html和#css div成比例地移动

这可能是非常明显的事情，但仍然无法弄清楚，我在这里遗漏了什么，请帮助我

注意：我不想使用

display:flex

$（“htmlNav”）。在（“mousedown”，dragStartH）上；
美元（“#cssNav”）。在（“mousedown”，dragStartH）；
美元（“#jsNav”）。在（“mousedown”，dragStartH）；
函数dragStartH（e）{
e、 预防默认值（）；
德拉格梅塔={}；
dragMeta.pageX0=e.pageX；
dragMeta.elem=此；
dragMeta.offset0=$（this.offset（）；
dragMeta.codeWindow=“#”+$（e.target）.attr（“id”）.replace（“Nav”，”）；
函数句柄\u拖动（e）{
var变化=e.pageX-dragMeta.pageX0；
var left=dragMeta.offset0.left+变化；
$（dragMeta.elem）.offset（{left:left}）；
$（“#css”）.width（$（“#css”）.width（）-change+px）；
$（“#html”）.width（$（“#html”）.width（）+更改+“px”）；
}
功能手柄\鼠标（e）{
$（“正文”）
.off（“鼠标移动”，手柄拖动）
.off（“mouseup”，handle_mouseup）；
}
$（“body”）。on（“mouseup”，handle\u mouseup）。on（“mousemove”，handle\u拖动）；
}
$（文档）.ready（函数（）{
变量widthPercent=（$（窗口）.width（）-30）/3；
$（“#html”）.width（widthPercent+“px”）；
$（“#css”）.width（widthPercent+“px”）；
$（“#js”）.width（widthPercent+“px”）；
});
html，正文{
身高：100%；
保证金：0；
}
.集装箱{
宽度：100%；
身高：100%；
背景色：#343；
显示器：flex；
弯曲方向：立柱；
颜色：#fff；
保证金：0；
}
#预览，#代码{
背景色：#433；
身高：50%；
宽度：100%；
保证金：0；
}
#代码{
边框底部：#333实心2px；
宽度：100%
}
#预览视频，#代码导航{
背景色：#bbb；
高度：10px；
宽度：100%；
光标：调整行大小；
}
#html{
背景色：#BFB；
}
#css{
背景色：#FBB；
}
#js{
背景色：#BBF；
}
#html、#css、#js{
浮动：左；
宽度：32%；
身高：100%；
}
#htmlNav、cssNav、jsNav{
背景色：#bbb；
浮动：左；
身高：100%；
宽度：10px；
光标：col resize；
z指数：10；
}

H
C
J
P
我会这样做：
跟踪您使用
navType
按下的手柄，并检查用户是否通过拖动
按住鼠标

然后，当用户在
文档
中移动鼠标并按住鼠标（
拖动
）时，它将相应地移动
#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;
});

请在Stack Overflow snippet editor的此处发布您的代码，而不是引用外部站点。您不想使用Flexbox的原因是什么？@Scott Marcus我认为css与讨论无关，我的错。@JeremyThille，我觉得IE做得不好，我可能错了。。flexbox可以使用me@AnandRockzz如果我们不包括CSS，我们将看不到可拖动的框。但是，我有一个问题，因为
#CSS
上的宽度减少发生在特定的中心，因此在右侧有一个小的剩余空白。。有没有办法改变宽度，保持左边不变？尝试使用
#cssNav
和
#jsNav
几次，这是一个州问题，我已经修复了它，我还更新了上面的代码。非常感谢。