Demo of destroy method of Droppable elements in JQuery UI

HTML

<div class='row'> <div class='col-md-6'> 
<div id="draggable" class='drg_box'>
  <p>Drag me to my destination</p>
</div>
</div><div class='col-md-2'>  
<div id="droppable" class='drop_box'>
  <p>Dropp here</p>
</div>
</div></div>
<div id=d1></div>
<br><div class='radio-inline'>
  <label><input type='radio' name='r1' id='r1' value='initialize' checked> initialize</label>
</div>

<div class='radio-inline'>
  <label><input type='radio' name='r1' id='r2' value='destroy' >destroy</label>
</div>

jquery

<script>
$(document).ready(function() {
////////////////
$( function() {
    $( "#draggable" ).draggable();
  });
///////////
$( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
            .find( "p" )
            .html( "Dropped!" );
      }
    });
///////////////
$("input:radio[name=r1]").click(function() {
var sel=$(this).val()
if(sel=='destroy'){
$( "#droppable" ).droppable( sel );
}else{
$( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
            .find( "p" )
            .html( "Dropped!" );
      }
    });
}
})
///////////////////////
})
</script>