jQuery UI resizable - триггер события на minWidth, maxWidth, minHeight, maxHeight превышен

Question

Я не могу найти событие, которое замечает меня, когда в документации API указаны или превышены лимиты min/max.

Есть ли возможность сделать это, не проверяя пределы самостоятельно?

Answer 1

Насколько я знаю, единственный вариант - проверить вручную, достигнуты ли пределы min/max. Вы можете использовать свойство size объекта ui, переданного на обратный вызов resize event для доступа к текущей ширине и высоте, и метод 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.}