调整约束jQuery .resizable()

Question

我试图强制jquery调整宽度，我解释说：

我在容器中有一个可调整大小的元素：

<div class="container">
    <div class="resizableObj"></div>
</div>

我的容器有固定的宽度：

.container{
    width:160px;
    background-color:red;
}

我想调整大小的高度，同时，我希望容器的高度增长。唯一需要的是限制宽度调整。

我不能用maxWidth属性来完成这个任务，因为我有多个调整大小的对象，并且它们被放置在容器中不同的位置。

如果我使用“包容：‘容器’”选项，如果我在容器底部调整了对象的大小，就不能放大容器，但我的宽度是受限的。

那我能做什么？

Answer 1

试试这个：http://jsfiddle.net/lotusgodkk/GCu2D/119/

联署材料：

$('.resizableObj').each(function () {
var d = $(this);
var maxW = parseInt(d.attr('data-maxwidth'));
d.resizable({
    maxWidth: maxW,        
    resize:function(event,ui){
        var H=0;
        $('.resizableObj').each(function(){
            var div = $(this);
            H+=div.outerHeight(true);                
        });
        $('.container').height(H+20);
        if(d[0].getBoundingClientRect().right>$('.container')[0].getBoundingClientRect().right){
            console.log('outside');
            $(this).resizable('widget').trigger('mouseup');
        }            
    }
});
});

HTML：

<div class="container">
 <div data-maxwidth="120" class="resizableObj"></div>
 <div data-maxwidth="220" class="resizableObj"></div>
 <div data-maxwidth="340" class="resizableObj"></div>
 <div data-maxwidth="30" class="resizableObj"></div>
</div>