Demo of Resizable with classes

User can select different resizable classes and apply the same to resizable element. We are also getting the value of applied classes on the element and displaying the same.

Tutorial Resizable

Full Code

HTML

<input type='radio' name='r1' id='r1' value='ui-state-highlight' checked>ui-state-highlight
 <input type='radio' name='r1' id='r2' value='ui-state-error' >ui-state-error
 <input type='radio' name='r1' id='r3' value='ui-state-error-text' >ui-state-error-text

<input type='radio' name='r1' id='r4' value='ui-state-disabled' >ui-state-disabled
<input type='radio' name='r1' id='r5' value='ui-priority-primary' >ui-priority-primary
<input type='radio' name='r1' id='r6' value='ui-priority-secondary' >ui-priority-secondary

<button type='button' class='btn btn-secondary'  id=d1></button>

<br>

<div id="resize_id" class=resize_cl></div>

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
  classes: {
    "ui-resizable": "ui-state-highlight"
  }
});
///////////////
var present_class = $( "#resize_id" ).resizable( "option", "classes.ui-resizable" );
$('#d1').html( " <b>Status of classes    :  </b>: " + present_class );
//////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
$( "#resize_id" ).resizable( "option", "classes.ui-resizable", sel );
var present_class = $( "#resize_id" ).resizable( "option", "classes.ui-resizable" );
$('#d1').html( " <b>Status of classes    :  </b>: " + present_class );
})
////////////
})
</script>

ui-state-highlight	ui-state-error	ui-state-error-text
ui-state-disabled	ui-priority-primary	ui-priority-secondary