Question

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

这可能是非常明显的事情，但仍然无法弄明白，我在这里缺少什么，请帮忙？

注意：我不想使用display:flex

$("#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和{{1相应的

将您的javascript更改为：

#js

以编程方式

1 个答案: