JSFiddle - React, Tailwind, and code Playground

by nhoughto5

HTML

<div id="drop" class="drop">drop here</div>
<img src="https://image.ibb.co/ivdedx/darth_Nihilus.png" width="100" height="100" draggable=true>

CSS

div{
    height: 100px;
    width: 100px;
    position relative;
}
div.drop{
    background: red;
}
div.source{
    background: green;
}

JavaScript

document.getElementById('drop').addEventListener('ondrop',function(){
    alert('dropped');
});
document.getElementById('drop').addEventListener('ondragenter',function(event){
    event.preventDefault();
    //$(this).html('drop now').css('background','blue');
})
document.getElementById('drop').addEventListener('ondragleave',function(){
    //$(this).html('drop here').css('background','red');
})
document.getElementById('drop').addEventListener('ondragover',function(event){
    event.preventDefault();
})