JSFiddle - React, Tailwind, and code Playground

by Samir Chaves

HTML

<div class="panel panel-success" id="panel">
  <div class="panel-heading">
    <h3 class="panel-title">Drop here!</h3>
  </div>
  <div class="panel-body">
  </div>
</div>
<div style="width:100px; height: 100px; background-color: black;" class="div"></div>

CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.panel{
  width: 300px;
  height: auto;
  background: #ccc;
  
  position: relative;
}
.panel .panel-body{
  background: #fff;
   box-sizing: border-box;
  width: 100%;
  height: 200px;
  padding: 10px;
}
.droped{
  position: absolute;
  bottom: 0;
}
.hover{
  border: 2px dashed #333;
  bottom: 0;
}

JavaScript

$(document).ready(function(){
  
$("#panel").draggable();
     $(".div").draggable();
     $("#panel").droppable({
       accept: ".div",
       drop: function() {
         $(this).css({
           background: "red",
           height: "auto",
           width: "auto",
           display: "inline-block"
         });
         $(".panel .panel-body").css({
           height: "auto",
           width: "auto"
         });
         $('.div').draggable('destroy');
         $('.div').appendTo(".panel .panel-body");
         $('.div').addClass('droped');
         $('.div').css({
           position: "relative",
           left: 0,
           top: 0
         });
       },
       hoverClass: "hover"
     });

})