jQuery UI Resizable Two Objects

Question

, пожалуйста, помогите мне с этим.

здесь скрипка: http://jsfiddle.net/zerolfc/5fke9sb8/4/

когда вы изменение размер вниз объект (.button) в стороне нижнего колонтитула и объект сталкивающегося с сноской. Как изменить размер или изменить высоту Article и изменить верхнее положение Footer, зависит от того, сколько пикселей изменяется размер объекта.

HTML

<div> 
    <div class="button">Resize Me</div> 
    <article></article> 
    <footer></footer> 
</div> 

CSS

.button { 
     background-color:#333; 
     border-color:#333; 
     color:#fff; 
     position:absolute; 
     top:200px; 
     left:50px; 
     height:50px; 
     width:150px; 
     text-align:center; 
     line-height:inherit; 
     z-index:1; 
    } 
    article { 
     position:absolute; 
     top:0; 
     left:0; 
     width:100%; 
     height:300px; 
     background-color:#ccc; 
    } 
    footer { 
     position:absolute; 
     top:300px; 
     left:0; 
     width:100%; 
     height:100px; 
     background-color:red; 
    } 

JS

$(function() { 

    $('.button').resizable({ 
     create: function (e, ui) { 
      var footer_current_top, body_current_height, object_current_height; 
     }, 
     start: function (e, ui) { 
      footer_current_top = parseInt($('footer').css('top')); 
      body_current_height = parseInt($('article').css('height')); 
      object_current_height = parseInt(ui.size.height); 
     }, 
     stop: function (e, ui) { 
      footer_current_top = parseInt($('footer').css('top')); 
      body_current_height = parseInt($('article').css('height')); 
      object_current_height = parseInt(ui.size.height); 
     }, 
     resize: function (e, ui) { 
      var handle = $(this).data('ui-resizable').axis; 
      if (handle === 's') { 

       if (parseInt(ui.position.top + ui.size.height) > footer_current_top) { 

        console.log('body H: ' + body_current_height + '; obj H: ' + object_current_height + '; obj new H: ' + ui.size.height); 

       } 

      } 
     } 
    }); 

}); 

Answer 1

Вы можете настроить CSS обоих элементов на Resi зе:

• Adjust сноска top CSS свойство

• Adjust статью height CSS свойство

  function resizeCheck(element){ 
      footer_current_top = parseInt($('footer').css('top')); 
      body_current_height = parseInt($('article').css('height')); 
      object_current_height = parseInt(element.size.height); 
      var elementBottom=element.position.top + element.size.height; 
      if (parseInt(elementBottom) > footer_current_top) {      
       $("footer").css("top",elementBottom+"px"); 
       $("article").css("height",elementBottom+"px"); 
      } 
  } 
  
  
  $('.button').resizable({ 
      resize: function (e, ui) { 
       resizeCheck(ui); 
      } 
  }); 
  

FIDDLE