jQuery UI可调整大小 - minWidth，maxWidth，minHeight，maxHeight上的事件触发器已超出

Question

当API文档中达到或超过min/max限制时，我无法找到引起我注意的事件。

有没有这样做的选择，没有自己检查限制？

Answer 1

据我所知，您唯一的选择是手动检查是否达到了极限值min/max。您可以使用传递给resize event回调的ui对象的size属性访问当前宽度和高度，以及使用option方法访问min和max值。

---

$(function() { 
 
    $("#resizable").resizable({ 
 
     minWidth: 50, 
 
     minHeight: 50, 
 
     maxWidth: 250, 
 
     maxHeight: 200, 
 
     resize: function (event, ui) { 
 
      var $elm = ui.element; 
 
      if (ui.size.width <= $elm.resizable("option", "minWidth")) 
 
       console.log("Reached Min Width!"); 
 

 
      if (ui.size.height <= $elm.resizable("option", "minHeight")) 
 
       console.log("Reached Min Height!"); 
 

 
      if (ui.size.width >= $elm.resizable("option", "maxWidth")) 
 
       console.log("Reached Max Width!"); 
 

 
      if (ui.size.height >= $elm.resizable("option", "maxHeight")) 
 
       console.log("Reached Max Height!"); 
 
     } 
 
    }); 
 
});

#resizable { 
 
    width:100px; 
 
    background:dogerblue; 
 
}

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.resizable.css" rel="stylesheet"/> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/css/jquery.ui.theme.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
 
<div id="resizable" class="ui-widget-content"> 
 
    <h3 class="ui-widget-header">Resizable</h3> 
 
</div>

---

^{无论如何，它会是不错的有这样的选择：我创建了一个Feature Request @ jQuery ui。}