JSFiddle - React, Tailwind, and code Playground

HTML

<div class="source">
    <div>test</div>
</div>
<div class="dest">

</div>

CSS

.source {
    width: 300px;
    height: 300px;
    border: 1px solid #000;
}

.source div {
    background: blue;
    width: 100px;
    height: 100px;
}

.dest{
    width: 400px;
    height: 300px;
    background: #888;
    position: relative;
    border: 1px solid blue;
}

.exp {
    background: red;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 20px;
    top: 20px;
}

.ui-draggable {
    background: red;
}

JavaScript

var dragConfig = {
		addClasses: true,
		helper: draggableHelper,
		appendTo: '.dest',
		containment: '.dest',
		scroll: false,
		zIndex : 11,
	};

	var droppedConfig = {
	    revert: 'invalid',
	    revertDuration : 0,
		addClasses: true,
		containment: '.dest',
		scroll: false,
		grid: [20, 20],
		zIndex : 11,
		start: function(){
			$(this).css('z-index', 100);
			currentParent = $(this).parent();	
		},
		stop: function(event, ui)	{
			// Security, revert doesn't follow the grid
			var draggedPosition = $(ui.helper).position();
			$(ui.helper).css({'left' : (Math.round(draggedPosition.left/20)*20)+'px', 'top' : (Math.round(draggedPosition.top/20)*20)+'px'});
			$(this).draggable('option','revert','invalid');
			$(this).css('z-index', 11);
		}
	};

$('.source div').draggable(dragConfig);


$('.dest').droppable({
      drop: function( event, ui ) {

			 // Helper was dropped (first drag)
			if (!ui.draggable.parent().hasClass('dest'))	{
				var clonedHelper = ui.helper.clone().draggable(droppedConfig).resizable({containment: ".dest", grid: 20});

                clonedHelper.append('<a href="#" class="remove-expo">X</a>');

                var draggedPosition = ui.helper.position();
				clonedHelper.css({'left' : (Math.round(draggedPosition.left/20)*20)+'px', 'top' : (Math.round(draggedPosition.top/20)*20)+'px'});
	
				clonedHelper.addClass('exp').removeClass('ui-draggable-dragging');
				
				// Apply a non droppable property to avoid overlapping
				clonedHelper.droppable({
					greedy: false,
					tolerance: 'touch',
					drop: function(event,ui){
						ui.draggable.draggable('option','revert',true);
					}
				});
	
				$(this).append(clonedHelper);
			}
		}
	});

function draggableHelper(e)	{
	return $('<div class="ui-draggable">'+$(e.target).html()+'</div>');
}