как отрегулировать ширину div на основе другого div postion

Question

У меня есть два div's: 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.if div-content2 перетащить справа налево ширине 65, в это время div-content ширина 35

мелко, если количество и содержание останутся в содержании, будут автоматически настроены. Пожалуйста, дайте мне любую идею.

Я теперь в Stackoverflow .if Я не прав писать Пожалуйста, управляйте мной.

Спасибо Расширенный

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>