JQuery UI 可调整大小的包含边界框

Question

我希望有一种方法可以设置像素而不是html元素的包含边界框。 我找到了一个带有相同事物的可拖动示例的帖子，他们的示例如下所示：

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

我尝试了同样的事情，可调整大小，导致错误：

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

是否有类似的语法可以与可调整大小一起使用？我唯一能找到的是包含：HTML_ELEMENT，还有maxWidth，maxHeight，minWidth，minHeight。

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

谢谢大家抽出宝贵时间

Answer 1

您可以在start可调整大小的函数中设置可调整大小元素的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>