JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a1_73" class="empty">#A1</div>
<div id="a2_73" class="empty">#A2</div>
<div id="a3_73" class="empty">#A3</div>
<div id="a4_73" class="empty">#A4</div>

<div class="a1_73 dragme">.A1</div>
<div class="a2_73 dragme">.A2</div>
<div class="a4_73 dragme">.A3</div>
<div class="a3_73 dragme">.A4</div>

CSS

#a1_73 {
            width: 362px;
            height: 295px;
            margin-left: 748px;
            margin-top: 314px;
            position: absolute;
        }
        #a2_73 {
            width: 318px;
            height: 213px;
            margin-left: 421px;
            margin-top: 188px;
            position: absolute;
        }
        #a3_73 {
            width: 360px;
            height: 243px;
            margin-left: 23px;
            margin-top: 367px;
            position: absolute;
        }
        #a4_73 {
            width: 396px;
            height: 199px;
            margin-left: 19px;
            margin-top: 50px;
            position: absolute;
        }
        .a1_73 {
            margin: 162px 0px 0px 858px;
            position: absolute;
        }
        .a2_73 {
            margin: 97px 0px 0px 759px;
            position: absolute;
        }
        .a4_73 {
            margin: 33px 0px 0px 634px;
            position: absolute;
        }
        .a3_73 {
            margin: 231px 0px 0px 853px;
            position: absolute;
        }
        div {
            background-color: red;
        }
        .dragme {
            width: 100px;
            height: 100px;
            background-color: black;
            color: #fff;
        }

JavaScript

$(".dragme").draggable({
	    start: function (event, ui) {
	        $(this).put_element();
	    }
	});

	$.fn.put_element = function () {
	    $this = $(this).attr('class').split(" ");
	    $this = $this[0];
	    $("#" + $this + "").droppable({
	        accept: "." + $this + "",
	        drop: function (event, ui) {
	            alert('OK');
	        }
	    })
	}