Demo of Resizable with ghost option

false

true

By setting the ghost option value to true we can display one semi transparent image of main element while resizing. By default this option value is false.

Change the selection of radio buttons above to see the effect of ghost option while resizing the element.

Tutorial Resizable

Full Code

<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
ghost:false
});
/////////
var read_opt = $( "#resize_id" ).resizable( "option", "ghost" );
$('#d1').html( " <b>Status of ghost:</b> " + read_opt );
/////// Clikc event of radio buttons///
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()=='true'; 
// set the option value
$( "#resize_id" ).resizable( "option", "ghost", sel ); 
// get the option value 
var read_opt = $( "#resize_id" ).resizable( "option", "ghost" ); 
$('#d1').html( " <b>Status of ghost:</b> " + read_opt );
})
////Click event end///
})
</script>

HTML

<table class='table'>
<tr><td>
<input type='radio' name='r1' id='r1' value=false checked>false</td>
<td><input type='radio' name='r1' id='r2' value=true>true</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>