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。}