禁用角落调整大小但在 JQuery 中保持水平/垂直调整大小？

Question

So I've been tinkering around with JQuery's resizable property and as of late, I've not found there to be a suitable type for what I'm trying to achieve.

The following example shows that you can resize both vertically and horizontally which is what I want, but you can also drag the corner box to resize which is not what I want. Is there a way to remove this box to make it resizable only by dragging the edges of the container?

 $( "#resizable" ).resizable();

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

Answer 1

check out their docs here: https://api.jqueryui.com/resizable/#option-handles

is this what you want to achieve?

 $( "#resizable" ).resizable({ handles: "n, e, s, w" });

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