JSFiddle - React, Tailwind, and code Playground

by ryan119

HTML

<div class = "bg">
    <div id = "row-1" class = 'row-style' draggable='true'>Drag Me</div>
    <div id = "row-2" class = 'row-style'></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{
    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();
});

function dragAndDrop(){
    
    var dragElement = document.getElementById('row-1');
    
    dragElement.addEventListener("dragstart",function(evt) {    
                
        $('body').prepend('<div id = "ghost-img" class ="ghost">I am Ghost</div>');
        $('#ghost-img').hide();
    
        //ghost image
        var crt = document.getElementById('ghost-img').cloneNode(true);
        crt.style.display = "inline-block";
        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("dragend",function(evt) {    
                
        $('.ghost').remove();
          
     },false);
    
    


}