JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css">
<div class="draggable ui-widget-content">
 <p>Drag me to my target</p>
</div>

<div id="drop1" class="droppable ui-widget-header">
 <p>Drop here</p>
</div>

<div id="drop2" class="droppable ui-widget-header">
 <p>Drop here</p>
</div>

CSS

.draggable { width: 90px; height: 90px; padding: 0.5em; position: relative; top: 0; left: 0; z-index: 2; }
.droppable { width: 120px; height: 120px; padding: 0.5em; position: absolute; z-index: 1; }
#drop1 { top: 150px; left: 300px; }
#drop2 { top: 400px; left: 100px; }

JavaScript

$(function(){
 var xmargin = 10,
  ymargin = 10,
  drag = $('.draggable'),
  drop = $('.droppable'),
  dgw = drag.outerWidth() + xmargin,
  dgh = drag.outerHeight() + ymargin,
  pos = [];


 drop
  .droppable({
   //hoverClass: 'ui-state-active',
   drop: function(event, ui) {
    $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
   }
  })
  // set up droppable coordinates array (left, top, right, bottom) for each element
  .each(function(i){
    var l = drop.filter(':eq('+i+')').position().left,
     t = drop.filter(':eq('+i+')').position().top,
     r = l + drop.filter(':eq('+i+')').outerWidth() + xmargin,
     b = t + drop.filter(':eq('+i+')').outerHeight() + ymargin;
   pos.push([l,t,r,b]);
  })

 drag
  .draggable()
  // bind to drag event, or this could be placed inside the draggable function
  .bind( "drag", function(event,ui){
   var l = ui.offset.left,
       t = ui.offset.top;
   // cycle through each droppable and compare current postion to droppable array
   drop.each(function(i){
    if ( ( l + dgw ) > pos[i][0] && l < pos[i][2] && ( t + dgh ) > pos[i][1] && t < pos[i][3] ) {
     drop.filter(':eq('+i+')').addClass('ui-state-active');
    } else {
     drop.filter(':eq('+i+')').removeClass('ui-state-active');
    }
   })
  });

})