JSFiddle - React, Tailwind, and code Playground

by Vinay Kumar

HTML

<div class='main-container'>
        This is main container
</div>


<div class='dummy-parent'>This is a parent element and it contain a child container 

<div class='dummy-child-container'></div>

</div>


<div class='dummy-child'>This is a child</div>

CSS

.main-container, .dummy-parent, .dummy-child{
  display : inline-block;
  width : 200px;
  height : 200px;
  border : solid 1px black;
}

.child-container, .dummy-child-container{
  width : 150px;
  height : 150px;
  border : solid 1px purple;
}

.parent{
  top : 10px;
  left : 10px;
  width : 180px;
  height : 200px;
  border : solid 1px green;
}

.child{
  width : 120px;
  height : 120px;
  border : solid 1px red;
}

JavaScript

$(document).ready(function () {       
 
 	$('.dummy-parent, .dummy-child').draggable({
            appendTo: "body",
            revert: true,
            helper: "clone", 
            cursor: "move",
            revertDuration: 0
        });

  $('.main-container').droppable({
            accept: ".dummy-parent",
            activeClass: "ui-state-highlight",
            drop: function( event, ui ) {
                var item = '';
                
                    item = "<div class='parent'>This is a parent element and it contain a child container <div class='child-container'></div></div>";
                    console.log(item);
                $(this).html(item);
            }
        });
        
        
        
$('.child-container').droppable({
            accept: ".dummy-child",
            activeClass: "ui-state-highlight",
            drop: function( event, ui ) {
                var item = '';
                
                    item = "<div class='child'>This is a child</div>";
                    console.log(item);
                $(this).html(item);
            }
        });
        
        });