JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr>
<td>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag1" src="img_logo.gif" width="336" height="69" draggable="true" ondragstart="drag(event)" />abs
</div>
</td>
<td>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag2" src="img_logo.gif" width="236" height="49" draggable="true" ondragstart="drag(event)" />abce
</div>
</td>
</tr>

<tr>
<td>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag3" src="img_logo.gif" width="336" height="69" draggable="true" ondragstart="drag(event)" />abs
</div>
</td>
<td>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag4" src="img_logo.gif" width="236" height="49" draggable="true" ondragstart="drag(event)" />abce
</div>
</td>
</tr>

</table>

CSS

#div1, #div2 {
    width:350px;
    height:70px;
    padding:10px;
    border:1px solid #aaaaaa;
}

JavaScript

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("src", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var src = document.getElementById(ev.dataTransfer.getData("src"));
    var srcParent = src.parentNode;
    var tgt = ev.currentTarget.firstElementChild;

    ev.currentTarget.replaceChild(src, tgt);
    srcParent.appendChild(tgt);
}