JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
	<div id="options">
<span id="title"><h2>Draggable Items </h2></span>
		<div id="drag1" class="drag">Element 1</div> <!-- end of drag1 -->
		<div id="drag2" class="drag">Element 2</div> <!-- end of drag2 -->
		<div id="drag3" class="drag">Element 3</div> <!-- end of drag3 -->
		<div id="drag4" class="drag">Element 4</div> <!-- end of drag4 -->
		
	</div><!-- end of options -->
	<div id="frame">
		<span id="title"><h2>Droppable Section </h2></span>
		<table id="tbldevs" border="1">
			
			<tbody class="wf-droppable">
				<tr>
					<td ></td>
					<td ></td>
					<td ></td>
					<td ></td>
				</tr>
				<tr>
					<td ></td>
					<td ></td>
					<td ></td>
					<td ></td>
				</tr>
				<tr>
					<td ></td>
					<td ></td>
					<td ></td>
					<td ></td>
				</tr>
				<tr>
					<td ></td>
					<td ></td>
					<td ></td>
					<td ></td>
				</tr>
				<tr>
					<td ></td>
					<td ></td>
					<td ></td>
					<td ></td>
				</tr>
				<tr>
					<td ></td>
					<td ></td>
					<td ></td>
					<td ></td>
				</tr>

			</tbody>
		</table>
	</div><!-- end of frame -->
</div><!-- end of wrapper -->

CSS

body {
	  text-align: center;
	  font-family:sans-serif;
}
#wrapper {
	  text-align: left;
	  width: 720px;
	  margin-left: auto;
	  margin-right: auto;
}

#options{
	width: 200px;
	height:550px;
	border:1px solid black;
	float:left;
}

#frame{
	width:493px;
	height:550px;
	//background-image: url("../images/UK-Map.gif");
	background-repeat: repeat-y;
    background-position: 0 0;
    border:1px solid black;
    float:right;
	padding:10px;
}

#tbldevs{
	border:1px solid black;
	width:80%;
	margin-left:50px;
	margin-top:10px;
}

#tbldevs th{
	text-align:center;
	height:50px;
	width:50px;
}

#tbldevs td{
	height:50px;
}


#drag1, #drag2, #drag3, #drag4 {
	margin-left:15px;
	margin-top:15px;
	width:32px;
	height:32px;
	background-size:cover;
}
#drag1{background-image: url("../images/User-icon.png");}

#drag2 {background-image: url("../images/user-login.png");}

#drag3 {background-image: url("../images/Email-icon.png");}

#drag4 {background-image: url("../images/success-icon.png");}



.ui-draggable-helperMoving {
	border: 1px dotted #000;
	padding: 6px;
	background: #fff;
	font-size: 1.2em;
	width:100px;
	height:100px;
}

.ui-draggable-helperStoped {
	border: 1px solid #000;
	width:5px;
	height:5px;
}



/* classes for dragged stuff */
.dragged1, .dragged2, .dragged3, .dragged4 {position:absolute;width:32px;height:32px;background-size:cover;}
.dragged1 {background-image: url("../images/User-icon.png");}
.dragged2 {background-image: url("../images/user-login.png");}
.dragged3 {	background-image: url("../images/Email-icon.png");}
.dragged4 {background-image: url("../images/success-icon.png");}

.ui-draggable{border:1px solid #999;padding:4px;}
.connectors{}
.connectors span.top,
.connectors span.right,
.connectors span.bottom,
.connectors span.left{width:10px;height:10px;border-radius:50%;position:absolute;background:#666;border:1px solid #999;}
.connectors span.top{top:-8px;left:50%;margin-left:-7px;}
.connectors...

JavaScript

//Counter
       var counter = 0;
        //Make element draggable
        $(".drag").draggable({
            helper:'clone',       
            //When first dragged
            stop:function(ev, ui) {
         
            }
        });
    
        //Make element droppable
$("td").droppable({
			drop: function(ev, ui) 
    {					counter++;
                if($(ui.draggable).hasClass("dragged"))
                {
                    var element=$(ui.draggable);
                    $(this).append(element);
                    $(element).css({left: "", top:""});
                }
                else
                {
					var element=$(ui.draggable).clone();
                    var connectors = "<div class='connectors'><span class='top'></span><span class='right'></span><span class='bottom'></span><span class='left'></span></div>";
                    $(element)
                    .attr("id","clonediv"+counter)
                    .addClass("dragged")
                    .appendTo(this).draggable();
                    $("#clonediv"+counter).append(connectors);
                }
               }
        });