JSFiddle - React, Tailwind, and code Playground

by Hans PUFAL

HTML

<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)" />
</div>
<br>
<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)" />
</div>

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);
}