JSFiddle - React, Tailwind, and code Playground

HTML

<div id="theDroppable">Droppable</div>
  <div id="theDraggable">Draggable</div>
  <div id="theTrigger">Click to trigger a drop</div>

CSS

div {
  border: 3px solid orange;
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 10px;
}

JavaScript

$( document ).ready(function() {  
 
    $( "#theDroppable" )
        .droppable({
          hoverClass : 'droppableStyle',
          drop: function( event, ui ) {
              alert('dropped');
          }
        });
   
   $( "#theDraggable" ).draggable({});
    
    $( "#theTrigger" ).click(function(){$( "#theDroppable" ).trigger('drop')});
   
   
 });