JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drag" draggable="true">Drag me!</div>
<div id="drop">Drop here!</div>

CSS

#drag, #drop {
    padding: 1em 2em;
    margin: 1em 0;
}
#drag {
    background: #CFC;
}
#drop {
    background: #FCC;
}

JavaScript

function dragstart_handler(ev) {
    console.log('dragstart');
    ev.dataTransfer.setData('text/x-example', 'Foobar');
}

function dragover_handler(ev) {
    // Accepting whatever is dragged over here
    ev.preventDefault();
}

function drop_handler(ev) {
    console.log('drop');
    console.log(ev.dataTransfer.types);

    if (ev.dataTransfer.types) {
        var i;
        for (i = 0; i < ev.dataTransfer.types.length; i++) {
            var type = ev.dataTransfer.types[i];
            console.log(type, ev.dataTransfer.getData(type));
        }
    }

    console.log(ev.dataTransfer.getData('text/x-example'));
}

var drag = document.getElementById('drag');
drag.addEventListener('dragstart', dragstart_handler, false);

var drop = document.getElementById('drop');
drop.addEventListener('dragover', dragover_handler, false);
drop.addEventListener('drop', drop_handler, false);