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/

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>

调整约束jQuery .resizable（）

1 个答案: