JSFiddle - React, Tailwind, and code Playground

by Travis Clarke

HTML

<div id="drag-coveredup" class="dragdemo" draggable="true"></div>

CSS

.dragdemo {
    width: 170px;
    height: 100px;
    position: relative;
    line-height: 100px;
    text-align: center;
    background: green;
    color: #efe;
}

JavaScript

document.getElementById("drag-coveredup").addEventListener("dragstart", function (e) {
    var crt = this.cloneNode(true);
    crt.style.backgroundColor = "red";
    crt.style.height = "10px";
    crt.style.width = "10px";
    crt.style.position = "absolute";
    crt.style.top = "0";
    crt.style.left = "0";
    crt.style.zIndex = "-1";
    document.getElementById("drag-coveredup").appendChild(crt);
    e.dataTransfer.setDragImage(crt, 0, 0);

    window.setTimeout(function () {
        crt.parentNode.removeChild(crt);
    }, 1000);


}, false);