JQuery UI 调整大小问题答案

【问题标题】：JQuery UI resize issueJQuery UI 调整大小问题
【发布时间】：2014-02-06 12:18:34
【问题描述】：

简单的情况 - 两个 div 和一个 div 即盒子。外部 div 是可滚动的。 div.box 可调整大小 (w,e)。当我尝试从右向左调整大小时，div.box 折叠为宽度：0px。

此处的示例：code

我已经阅读了有关 jquery-ui resizable 的所有内容，但找不到适合我的解决方案。如有任何帮助，我将不胜感激。

HTML：

<div class="container-scroll">
    <div class="container">
        <div class="box"></div>
    </div>
</div>

CSS：

.container-scroll {
    display:block;
    width:500px;
    height:100px;
    overflow:scroll;
    border:1px solid #666;
}
.container {
    display:block;
    position:relative;
    width:1000px;
    height:100px;
    padding:20px 0;    
    background-color:#eee;
}
.box {
    display:block;
    position:absolute;
    width:1000px;
    left:0;
    /*right:0;    */
    height:50px;
    background:red;
}

Javascript：

$('.box').resizable({
    containment: 'parent',
    handles: 'w, e',
    grid: [10,10]
});

【问题讨论】：

标签： jquery jquery-ui resizable

【解决方案1】：

删除你的遏制调用解决了这个问题，据我所知，无论哪种方式都是多余的：

$('.box').resizable({
    handles: 'w, e',
    grid: [10,10]
});

编辑

考虑到您的评论，您最好的选择可能是使用“maxWidth”选项并将其设置为容器的宽度（以小提琴中的宽度为例）。

$('.box').resizable({
    maxWidth: 1000,
    handles: 'w, e',
    grid: [10,10]
});

【讨论】：

是的。移除“遏制”解决了意外崩溃的问题。但我需要一个“遏制”，因为我想让 div.box 不超过 div.container 的边界（这是强制性的！）。
好的，看看更新的答案，这应该允许你提到的功能。
是的，你又说对了，但是 maxWidth 并没有保护 div.box 超出 div.container 的边界。例如，您可以先尝试调整左侧的大小，然后再调整 div.box 的右侧。我开始认为这是 jquery-ui resizable 的一个主要问题。当某些父对象可滚动时，可能无法准确计算包含大小。

【解决方案2】：

我找到了一个解决方案，使用 parasite div.box-wrap，它并不完美，但算是一种解决方案。

HTML：

<div class="container-scroll">
    <div class="container">
        <div class="box-wrapper">
            <div class="box"></div>
        </div>
    </div>
</div>

CSS

.box-wrapper {
    width:100%;
    height:50px;
    background-color:#fc3;
}

思路是：父容器要处于正常的流渲染中，而不是绝对或相对定位。更新版本：http://jsfiddle.net/sdoichev/Fac9m/

现在它可以完成这项工作。

【讨论】：

【解决方案3】：

当我移除容器时它工作正常。我认为收容措施阻止了它调整大小。 http://jsfiddle.net/4awJm/15/

$('.box').resizable({
    
	handles: 'w, e',
    grid: [50,10]
});

.container-scroll {
    display:block;
    width:500px;
    height:100px;
    overflow:scroll;
    border:1px solid #666;
}
.container {
    display:block;
    position:relative;
    width:1000px;
    height:100px;
    padding:20px 0;    
    background-color:#eee;
}
.box {
    display:block;
    
    left:0;
    right:0;    
    height:50px;
    background:red;
}

<div class="container-scroll">
    <div class="container">
        <div class="box"></div>
    </div>
</div>

【讨论】：