Изменение размера div на перетаскивание

Question

У меня есть элемент div, который мне нужно изменить размер при перетаскивании границы. Я вставляю код ниже. Все работает нормально, но поскольку я увеличиваю высоту, положение элементов под перетаскиваемым div остается статичным, а перетаскиваемый div перекрывает их.

var cmd = false; 
var crs = false; 
$(document).on('mousemove', '.chartbody', function(e) { 
    var y = (e.pageY - $(this).offset().top); 
    var ht = $(this).height(); 
    if (!cmd) { 
     if (y - 1 == ht) { 
      crs = true; 
     } else { 
      crs = false; 
     } 
    } 
    else 
     if (crs) { 
      $(this).height(y); 
     } 
}); 

$(document).on('mouseup', '.chartbody', function(e) { 
    cmd = false; 
}); 

$(document).on('mousedown', '.chartbody', function(e) {  
    cmd = true; 
}); 

Как изменить размер div таким образом, чтобы элементы под ним были автоматически расположены.

Answer 1

Вы можете легко использовать Jquery ui plugin, чтобы решить эту проблему быстро.

Добавьте скрипты и стили, указанные в образце на страницу

<link href="~/Content/themes/base/all.css" rel="stylesheet" /> 

<style type="text/css"> 
    .parent { 
     width: 100%; 
     height: 100px; 
    } 

    .parent_1 { 
     background: red; 
    } 

    .parent_2 { 
     background: blue; 
     margin: 10px 0; 
    } 
</style> 

<div class="new_item"></div> 
<div class="body"> 
    <br><br> 
    <div class="parent parent_1"> 

    </div> 
    <div class="parent parent_2"> 

    </div> 
</div> 


    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script> 
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.11.2.js"> 
    </script> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      $("div.parent_1").resizable(); 
     }); 

    </script> 

Надеется, что это помогает.