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

Question

please me help with this one.

here the fiddle: http://jsfiddle.net/zerolfc/5fke9sb8/4/

when you are resizing down the object (.button) towards the footer and the object colliding with the footer. How do I resize or change the height of the Article and change the Footer top position depends on how many pixel the object is resized.

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

You can adjust the css of both elements on resize:

• Adjust footer top css property

• Adjust article height css property

   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