jquery - 调整约束 jQuery .resizable()

Question

我尝试强制 jquery 调整宽度，我解释说:

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

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

我的容器有一个固定的宽度:

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

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

我无法使用 maxWidth 属性来完成此操作，因为我有多个调整大小的对象，并且它们被放置在容器中的不同位置。

如果我使用“containment:'.container'”选项，如果我在它的底部调整我的对象的大小，我就无法放大我的容器，但我的宽度受到限制。

那我能做什么呢？

Answer 1

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

Js:

$('.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>