JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<body>
 
<div id="content" style="height: 400px;">
 
    <div class="makeMeDraggable"> </div>
  <div class="makeMeDroppable"> </div>
  <div class="makeMeDraggable"> </div>
  <div class="makeMeDroppable"> </div>
    <div class="makeMeDroppable"> </div>
 
</div>
 
</body>

CSS

.makeMeDraggable {width: 300px; height: 300px; background: pink; position: absolute;}


.makeMeDroppable {width: 300px; height: 300px;  }
.hovered {
    background-color: silver;
    
}

JavaScript

$( init );
 
function init() {
    $('.makeMeDraggable').draggable( {
    containment: '#content',
    } );
  $('.makeMeDroppable').droppable( {
    drop: handleDropEvent,
    hoverClass: 'hovered',
  } );

}
 
function handleDropEvent( event, ui ) {
  var draggable = ui.draggable;
var offsetYPos = parseInt( ui.offset.top );

  ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );

}