Demo of Resizable events

We can add various events like create, resize , start and stop event with the resizable element. There are event listeners for each event which are triggered based on the event.

We have displayed different messages based on different triggered events of the resizable element.

Tutorial Resizable

Full Code

<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
	create: function( event, ui ) {
		$('#d1').html( " resizecreate Event..  "  );
	}
});
/////////

///////event  listener ///
$( "#resize_id" ).on( "resizecreate", function( event, ui ) {
	$('#d1').html( " resizecreate Event..  "  );
});

$( "#resize_id" ).on( "resize", function( event, ui ) {
	$('#d1').html( " resize Event..  "  );
});

$( "#resize_id" ).on( "resizestart", function( event, ui ) {
	$('#d1').html( " resizestart  Event..  "  );
});

$( "#resize_id" ).on( "resizestop", function( event, ui ) {
	$('#d1').html( " resizestop Event..  "  );
});

////Click event end///
})
</script>

HTML

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

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

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