JSFiddle - React, Tailwind, and code Playground

by Kondal Durgam

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

  <title>JS Bin</title>

<body>
<div class="first">
  <div class="second">
    <div class="third"></div>
  </div>

</div>
</body>

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: black;
}
.second
{
  background-color: white;
}
.third
{
  background-color: green;
  width: 50px;
  height: 50px;
}

JavaScript

$('div').draggable({
  revertDuration: 0,
  revert: true,
  appendTo: 'body',
  refreshPositions: true,
  start: function( event, ui ) {
    var $this = $(this);
    //Instead of helper: 'clone'
    var $newElem = $this.clone().addClass("clonedElem");
    $this.css("z-index", 1000);//make sure draggable is on top of all elements
    $this.css("position", "absolute").after($newElem);//Keep original space
    makeDroppable($newElem.find("div").addBack());
  },
  stop:function( event, ui ) {
    $(this).css("position", "relative")//restore original positioning
    .css("z-index", "auto");//restore original z-index
    $(".clonedElem").remove();//remove cloned element
  }
});

function makeDroppable($elem){
  $elem.droppable({
         greedy: true,
         accept: 'div',
         activeClass: 'active',
         hoverClass: 'hover',
         tolerance: 'pointer',
         drop: function(event, ui){
             console.log("DROPPED", $(this).attr('class'))
         }
  })  
}


makeDroppable($("div"));