JSFiddle - React, Tailwind, and code Playground

HTML

<form method="post" action="">

	<div id="boxdemo">
		<div class="draggable size1 ">
			MOVABLE BOX
		</div>
		<div class="draggable size2">
			MOVABLE BOX2
		</div>
	
	
		<div class="droppable"></div>

		<div class="clear"></div>
	</div>

	<input type="submit" name="add" value="Reset" />
</form>

CSS

#boxdemo{
		width:800px;
		height:400px;
		position:relative;
		padding:10px;
		border:solid 1px blue;
	}


	.droppable { 
		width: 250px; 
		height: 200px;
		float: left; 
		border:solid 1px gray;
		margin-left:150px;
	}


	.draggable{ 
		border:1px solid #000;
		background-color:#d9de48;		
		display:table-cell;
		margin: 2px;
		padding: 2px;
		text-align:center;
		vertical-align:middle;
		font-size:12px;
		font-weight:bold;
		width:75px;
		height:75px;
		float: left; 
	}

	.size1{	width: 75px; height: 90px;}
	.size2{ width: 50px; height: 60px;}


	.hoverClass{
		background:#339bfb;
		color:#ffffff;
	}


	.dropClass{
		background:#55d532;
	}

	.clear{
		clear:both;
	}

JavaScript

$(function() {
       
	$( ".draggable" ).draggable({ 
		containment:"#boxdemo",
		revert: "invalid"
	});

	$( ".droppable" ).droppable({

		tolerance: 'fit',
		over: function(event, ui) {
			$('.ui-draggable-dragging').addClass('hoverClass');
		},
		out: function(event, ui) {
          			$('.ui-draggable-dragging').removeClass('hoverClass');
		},
      
		drop: function( event, ui ) {
			$( ".droppable" ).addClass('dropClass');
		}
	});
});