Demo of Resizable with grid option

[3,3]

[35,35]

While resizing, the element will get snapped to a grid. We can assign the grid value through an array of pixel values in numbers.

By selecting the radio buttons we can set the grid to a different value. This way we can see the difference in resizing the element with lower and higher grid value.

Tutorial Resizable

Full Code

<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
grid:[3,3]
});
/////////
var read_opt = $( "#resize_id" ).resizable( "option", "grid" );
$('#d1').html( " <b>Value of grid Option:</b> " + read_opt );
/////// Clikc event of radio buttons///
$("input:radio[name=r1]").click(function() {
var sel=$(this).val(); 
// set the option value
if(sel=='a'){
$( "#resize_id" ).resizable( "option", "grid", [3,3] ); }
else{
$( "#resize_id" ).resizable( "option", "grid", [35,35] ); }	

// get the option value 
var read_opt = $( "#resize_id" ).resizable( "option", "grid" ); 
$('#d1').html( " <b>Status of grid:</b> " + read_opt );
})
////Click event end///
})
</script>

HTML

<table class='table'>
<tr><td>
<input type='radio' name='r1' id='r1' value='a' checked>[3,3]</td>
<td><input type='radio' name='r1' id='r2' value='b'>[35,35]</td>
</tr></table>

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

<br><br>

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

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

</div></div>