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 属性

调整文章heightcss属性

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

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

jQuery UI Resizable Two Objects

html

javascript

css

jquery

jquery-ui