JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container1">
  <div class="widget1">
  </div>
</div>

<div class="container2">
</div>

CSS

.container1, .container2 {
  background: blue;
  width: 250px;
  height: 250px;
  margin-bottom: 20px;
  position: relative;
}

.widget1 {
  background: red;
  width: 50px;
  height: 50px;
  position: absolute;
}

JavaScript

$('.widget1').resizable({
	containment: 'parent'
}).draggable({
  revert: 'invalid'
});

$('.container1, .container2').droppable({
	tolerance: 'fit',
  drop(ev, ui) {
		const droppedTarget = $(this);
    const elem = ui.draggable.detach();
    
		elem.css({
			top: ui.offset.top - droppedTarget.offset().top,
			left: ui.offset.left - droppedTarget.offset().left 
		});

		elem.appendTo(droppedTarget);
  }
});