jQuery UI可调整大小-超过minWidth、maxWidth、minHeight、maxHeight的事件触发器

Question

当API文档中达到或超过min/max限制时，我找不到通知我的事件。

有没有一个选项可以做到这一点，而不需要自己检查限制？

Answer 1

据我所知，您唯一的选择是手动检查是否达到min/max限制。您可以使用传递给调整大小事件回调的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>

---

^{不管怎样，如果有这个选项会很好：我已经创建了一个FeatureRequest@jQueryui}