Question

我希望有一种方法可以以像素而不是html元素设置容纳边界框。我发现了一篇包含同一内容的Draggable示例的帖子，其示例如下所示：

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

我尝试过使用可调整大小的操作，这导致了错误：

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

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

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

谢谢大家的时间

Answer 1

您可以只在maxWidth, minWidth, maxheight, minHeight可调整大小函数中的可调整大小元素上设置start选项，也可以使用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>

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

1 个答案: