Demo of create event of droppable element

Only after creating droppable element ( by using button below ) you can see activate and deactivate events.

HTML

<div class='row'> <div class='col-md-6'> 
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my destination</p>
</div>
</div><div class='col-md-2'>  
<div id="droppable" class="ui-widget-header" >
  <p>Dropp here</p>
</div>
</div></div>

jquery

<script>
$(document).ready(function() {
////////////////
$( function() {
$( "#draggable" ).draggable({
});
});
///////////
$('#create').click(function(){
$( "#droppable" ).droppable({
create: function( event, ui ) {
  var d_position = $(this).position();
      $( this )
        .find( "p" )
        .html( "I am Created " );
     },
	 activate: function( event, ui ) {
      $( this )
        .find( "p" )
        .html( "started moving " );
     },
	 deactivate: function( event, ui ) {
  
      $( this )
        .find( "p" )
        .html( "stopped ");
     }
     });
})
///////////////
///////////////////////
})
</script>