javascript - 如何根据另一个div位置调整div宽度

Question

我有两个 div，一个是 div-content(红色)，第二个是 div-content2(黄色)。div-content 大小为 0 到 50%，div-content2 大小为 50% 到 100%。

现在在我的屏幕中 50% div-content 和 50% div-content2

我需要将div-content1从左向右拖动div-content1宽度为70。此时div-content2将为30。如果 div-content2 从右向左拖动宽度为 65 ，则此时 div-content width 35

当内容增加且内容保持不变时，内容会自动调整，所以请给我任何想法。

我现在在 Stackoverflow。如果我写错了，请指导我。

高级感谢

Answer 1

只是它的概念:

    
    var drag = false,
    maxW = $('.wrap').width();
    $('.div1').click(function(){}).mousedown(function(event){
      drag = true;  
    });

$(document).mousemove(function(event){
    if(drag) {
        if($('.div1').width() < maxW) {
            $('.div1').width(event.pageX); 
        }
    }
}).mouseup(function(){
    drag = false;
});

.wrap {
    width:100%;
    position: relative;
}
.div1,
.div2 {
    width:50%;
    height:300px;
}

.div1 {
    position: absolute;
    top:0;
    left:0;
    z-index:1;
    width: 50%;
    background-color:red;
    cursor:e-resize;
}

.div1:focus {
    cursor:e-resize;
}

.div2 {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    background-color:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
    <div class="div1"></div>
    <div class="div2"></div>
</div>