Question

我有两个div，一个是div-content（红色），第二个是div-content2（黄色）。div-content大小为0到50％，{{1大小50％到100％。

现在在我的屏幕上有50％div-content2和50％div-content

我需要div-content2向左拖动div-content1宽度为70.在那个时间div-content1将是30.if div-content2从右向左拖动宽度为65，在那个时间div-content2宽度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>

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

1 个答案: