jQuery UI 可调整大小的包含边界框答案

【问题标题】：JQuery UI Resizable Containment Bounding BoxjQuery UI 可调整大小的包含边界框
【发布时间】：2018-10-03 00:38:33
【问题描述】：

我希望有一种方法可以以像素而不是 html 元素设置包含边界框。我发现了一个帖子，里面有一个相同的 Draggable 示例，他们的示例如下所示：

$( "#img" ).draggable({ containment: [x1, y1, x2, y2] });

我用 resizable 尝试了同样的事情，结果出现了错误：

"Uncaught TypeError: Cannot read property 'defaultView' of undefined"

是否有类似的语法可以用于调整大小？我能找到的唯一东西是容器：HTML_ELEMENT，还有 maxWidth、maxHeight、minWidth、minHeight。

我的目标是在调整大小的元素中包含距包含元素边缘一定数量的像素。

感谢大家的宝贵时间

【问题讨论】：

x1 的值与什么有关？
@ksav 元素一个（被拖动的元素）左侧位置：ui.draggable.position().left
@Souleste 和 y1 与元素的顶部位置有关吗？他们真的需要一些解释。
我不能确定，但我认为这里的一般答案也是“到窗口”。似乎这些是通用窗口上的坐标，而不是相对于父元素或任何东西。
@daprezjer 这个codepen 可能会有所帮助。

标签： jquery-ui-resizable

【解决方案1】：

您可以在start resizable 函数中对可调整大小的元素设置maxWidth, minWidth, maxheight, minHeight 选项，也可以使用css 对元素设置最小值和最大值。

$('.widget1').resizable();

var minW = 50;
var maxW = 200;
var minH = 50;
var maxH = 200;

$('.widget2').resizable({
  start: function(e, ui) {
    var minWidth = $(this).resizable("option", "minWidth", minW);
    var maxWidth = $(this).resizable("option", "maxWidth", maxW);
    var minHeight = $(this).resizable("option", "minHeight", minH);
    var maxHeight = $(this).resizable("option", "maxHeight", maxH);
  }
});

.container {
  height: 200px;
  width: 200px;
  border: 1px solid #aaa;
}

.widget {
  min-width: 50px;
  width: 50px;
  min-height: 50px;
  height: 50px;
  background: #ccc;
  position: relative;
  margin: 10px;
  display: inline-block;
}

.widget1 {
  max-height: 200px;
  max-width: 200px;
}

.ui-resizable-se {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: #222;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="widget1 widget"></div>

<div class="widget2 widget"></div>

【讨论】：