javascript - jQuery UI 可调整大小的两个对象

Question

请我帮忙解决这个问题。

这里是 fiddle :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:

• 调整页脚 top css 属性

• 调整文章高度 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