As you can see from the function:
drop: function( event, ui ) {
alert('dropped');
}
If you define methods such as DROP during the declaration of droppable then they are called only when a DOM element(UI object) is dropped on them hence you can't trigger those function.
If you need to trigger DROP then I would suggest you to bind that event to the droppable as:
$( "#theDroppable" ).droppable({hoverClass : 'droppableStyle'});
$( "#theDroppable" ).on('drop',function(event,ui){
alert('dropped');
});
The DROP function can now be triggered by dropping 2nd DIV or by clicking 3rd DIV as in your case. Trigger it manually using:
$( "#theDroppable" ).trigger('drop');
NOTE: The argument 'ui' will be undefined if triggered manually, else it will contain the UI object when draggable is dropped on it.
Here is jsFiddle