JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<div class="first">
  <div class="second">
    <div class="third"></div>
  </div>
</div>

CSS

div
{
  display: inline-block;
  padding: 40px;
}
div.ui-draggable-dragging
{
  outline: 2px solid black;
}
div.active
{
  outline: 4px solid #0ff;
}
div.hover
{
  background-color: #f0f;
}
.first
{
  background-color: red;
}
.second
{
  background-color: green;
}
.third
{
  background-color: blue;
  width: 50px;
  height: 50px;
}

JavaScript

$('div').draggable(
{
	revert: true,
  helper: 'clone',
  appendTo: 'body',
  refreshPositions: true
});

$('div').droppable(
{
    greedy: true,
    accept: 'div',
    activeClass: 'active',
    hoverClass: 'hover',
    tolerance: 'pointer',
    drop: function(event, ui)
    {
    	alert($(this).attr('class'));
    }
});