可调整大小的容器不起作用答案

【问题标题】：Resizable containment doesn't work可调整大小的容器不起作用
【发布时间】：2014-07-10 21:21:05
【问题描述】：

我制作了一个可拖动和调整大小的 div。对可拖动的遏制似乎有效，但它不能调整大小。你知道为什么吗？这是我的 HTML：

<div class="page">
    <div class="area"></div>
</div>

我的 jquery 代码是（其中 self.$area 是代表 .area div 的 jquery 对象）：

    self.$area.resizable({
        containment : 'parent',
    });

    self.$area.draggable({
        containment : '.page',
    });

我的 .area 是绝对位置，我的 .page 是相对位置。

感谢您的帮助。

【问题讨论】：

标签： jquery jquery-ui draggable resizable

【解决方案1】：

您可以参考这个 demo JSFIDDLE 以获得简单的 draggable + resizable 和 containment

代码：

<div id="container" class="ui-widget-content">
<h3 class="ui-widget-header">Containment</h3>
<div id="resizable" class="ui-state-active">
<h3 class="ui-widget-header">Draggable & Resizable</h3>
</div>
</div>

<script>
$(function() {
     $( "#resizable" ).draggable({containment: "#container"}).resizable({
containment: "#container"
});
</script>

});

【讨论】：

这就是我所做的。但这对我不起作用（jQuery UI - v1.11.0）。

【解决方案2】：

我找到了解决办法。在我的 div 中，我有一个这样的：

<div class="page">
    <img src="..." alt="" class="imgPage" />
    <div class="area"></div>
</div>

图像的尺寸为 100%*100%。所以我把这张图片放在了收容间，它可以工作......

谢谢。

【讨论】：