JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "bg">
    <div id = "ghost-img" class ="ghost">I am Ghost</div>
    <div id = "row-1" class = 'row-style' draggable='true'>Drag Me</div>
    <div id = "row-2" class = 'row-style' draggable='true'></div>
    <div id = "row-3" class = 'row-style'></div>
</div>

CSS

.bg{
    background:#00DD00;
    width:500px;
    height:500px;
    position:fixed:
    z-index:1;
}

.row-style{
    width:200px;
    height:20px;
    background:black;
    color:white;
    margin:20px;
}


.ghost{
    position:absolute;
    z-index:980000075;
    width:200px;
    height:20px;
    background:red;
    margin:20px;
    
    -webkit-animation: dragAnimation 2s; 
}

@-webkit-keyframes dragAnimation{
    from {background-color: blue;}
    to {background-color: yellow;}
}

JavaScript

$(document).ready(function(){
    dragAndDrop();
    
       $('#ghost-img').hide();
});

function dragAndDrop(){
    
    var dragElement = document.getElementById('row-1');
    
    dragElement.addEventListener("dragstart",function(evt) {    
                
           $('#ghost-img').show();

        //ghost image
        var crt = document.getElementById('ghost-img').cloneNode(true);
        crt.style.position = "absolute"; 
        crt.style.top = "0px";      
        crt.style.right = "0px";
        crt.style.zIndex = -1;
        document.body.appendChild(crt);
    
        evt.dataTransfer.setDragImage (crt, 0, 0);
        
       
     },false);
    
    
     dragElement.addEventListener("drag",function(evt) {    
                
        $('.ghost').css('top', evt.pageY);
        $('.ghost').css('left', evt.pagex);
          
     },false);
     dragElement.addEventListener("dragend",function(evt) {    
                
        $('.ghost').hide();
          
     },false);
    
    


}