Demo of Resizable with handles option

With handles option we can set draggable handles at different directional edges of the element for resizing. There are eight values including 4 sides and 4 corners. Here they are .

Sides are : n , s, e w ( North, South, East , West )
Corners are : ne, se, sw, nw ( North East, South East, South West, North West )

There are eight checkboxes for above eight directions. You can add or remove handles in these eight different directions by using the checkboxes. Based on your selection of checkboxes different handles will appear dynamically over the element. Place the mouse over edges and check.

We can read the value of the handles option and displayed in our button element.

Try to resize the element by adding or removing different directional handles.

Tutorial Resizable

Full Code

<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
handles :"n,e,w,nw"
});
/////////
var read_opt = $( "#resize_id" ).resizable( "option", "handles" );
$('#d1').html( " <b>Value of handles Option:</b> " + read_opt );
/////// Clikc event of check  buttons///
$('input[type="checkbox"]').change(function(){
 var str = '';

$.each($("input[type='checkbox']:checked"), function(){  
str = str + ", " + ($(this).val());
});
str=str.substr(1); // remove the first char , 
$("#resize_id").resizable("option","handles",str);
$("#display").html("checkbox = " + str );

var read_opt = $( "#resize_id" ).resizable( "option", "handles" ); 
$('#d1').html( " <b>Get handles:</b> " + read_opt );
});
/////////
////Click event end///
})
</script>

HTML

<div class='row'> <div class='col-md-6'>

<table class='table'>
<tr><td><input type=checkbox id='ckb1' value='n'>n</td>
<td><input type=checkbox id='ckb2' value='s'>s</td>
<td><input type=checkbox id='ckb3' value='e'>e</td>
<td><input type=checkbox id='ckb4' value='w'>w</td>
<tr><td><input type=checkbox id='ckb5' value='ne'>ne</td>
<td><input type=checkbox id='ckb6' value='se'>se</td>
<td><input type=checkbox id='ckb7' value='sw'>sw</td>
<td><input type=checkbox id='ckb8' value='nw'>nw</td>
</tr></table>
</div><div class='col-md-6'>

</div></div>

<div class='row'> <div class='col-md-6'>
 <button type='button' class='btn btn-secondary'  id=d1></button>
</div><div class='col-md-6'>
<button type='button' class='btn btn-secondary'  id=display>Checkbox =</button>
</div></div>
<br><br>

<div class='row'> <div class='col-md-12'>

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

</div></div>