JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scale">
		  <span id="drop-1" class="drop"></span>
		  <span id="drag-1" class="drag"></span>
</div>

CSS

#scale {
				-moz-transform: scale(0.50, 0.50); 
				-webkit-transform: scale(0.50, 0.50); 
				-o-transform: scale(0.50, 0.50);
				-ms-transform: scale(0.50, 0.50);
				transform: scale(0.50, 0.50); 
				-moz-transform-origin: top left;
				-webkit-transform-origin: top left;
				-o-transform-origin: top left;
				-ms-transform-origin: top left;
				transform-origin: top left; 
			}

			#drop-1 {
			  display: block;
				background-color: red;
				width: 200px;
				height: 150px;
				left: 78px;
				top: 149px;
			}

			#drag-1 {
			  position: relative;
			  top: 100px;
			  cursor: pointer;
			  display: block;
			  background-color: blue;
			  height: 25px;
			  width: 25px;
			}

JavaScript

$.fn.scaleDroppable = function(params, scaleFactor){
				var offset = $(this).offset();
				var bottom = offset.top + $(this).height() * scaleFactor;
				var right = offset.left + $(this).width() * scaleFactor;
				var element = this;
				$(document).mousemove(function(e){
					if(typeof($(document).data("dragObject")) != "undefined"){
						if( e.pageX <= right && e.pageX >= offset.left &&  e.pageY <= bottom && e.pageY >= offset.top ){
							//movein
							if(typeof(params.over)=="function"){						
								params.over.call(element);
								if( typeof($(document).data("dragObject").data("inElements")) == "undefined")
									$(document).data("dragObject").data("inElements", []);
									$(document).data("dragObject").data("inElements").push(element);
							}
						}else{
							//moveout
							var objectIndex = ($(document).data("dragObject").data("inElements") || []).indexOf(element);
							if(typeof(params.out)=="function" && objectIndex > -1){
								params.out.call(element);
				        		$(document).data("dragObject").data("inElements").splice(objectIndex, 1);
							}
						}
					}
				});
			};
			
			$.fn.scaleDraggable = function(scaleFactor){
				$(this).mousedown(function(){
					$(document).data("dragObject", $(this));
					var moveObject = function(event){
						$(document).data("dragObject").offset({top: event.pageY - ($(document).data("dragObject").height() * scaleFactor / 2), left: event.pageX -($(document).data("dragObject").innerWidth()  * scaleFactor / 2)});
					};
					$(document).mousemove(moveObject);
					$(document).one('mouseup', function(){
						$(document).removeData("dragObject");
						$(document).unbind("mousemove", moveObject);
					});
				});
			};
			

		$(document).ready(function(){
			
			$("#drop-1").scaleDroppable(
					{
						over: function() {
							$(this).css({'opacity' : '.4'});
						},
						out: function() {
							$(this).css({'opacity' :...