JSFiddle - React, Tailwind, and code Playground

HTML

<div ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</div>
<div ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</div>
<div ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</div>
<div id="dx" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)"></div>
<div ondrop="drop(event)" ondragover="allowDrop(event)">&nbsp;</div>

CSS

div:not(#dx):not(.shadow) {
    border: 1px solid black;
    margin: 5px;
}

#dx {
    background-color: red;
    width: 50px;
    height: 100px;    
}

.shadow {
    background-color: red;
    width: 20px;
    height: 30px;    
}

JavaScript

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

function drag(ev) {
    var shadow = createShadowElement();
    var element = document.getElementById(ev.target.id);
    element.appendChild(shadow);
    
    ev.dataTransfer.setDragImage(shadow, 0, 0);
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var element = document.getElementById(data);
    ev.target.appendChild(element);
}

function dragEnd(ev) {
    removeShadowElement();    
}

function createShadowElement() {
    var element = document.createElement("div");
    element.className = "shadow";
    element.id = "shadowElement";
    return element;
}

function removeShadowElement() {
    var element = document.getElementById("shadowElement");
    element.parentElement.removeChild(element);
    //document.body.removeChild(element);    
}