JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li draggable='true' data-letter='a'>A</li>
    <li draggable='true' data-letter='b'>B</li>
    <li draggable='true' data-letter='c'>C</li>
    <li draggable='true' data-letter='b'>B</li>
    <li draggable='true' data-letter='c'>C</li>
</ul>

<div id='droppable'></div>

CSS

#droppable {width: 300px; height: 300px; background: violet;}

JavaScript

var dragged;
document.getElementById('droppable').addEventListener('dragenter', function (e) { e.preventDefault() });
document.getElementById('droppable').addEventListener('dragover', function (e) { e.preventDefault() });
document.getElementById('droppable').addEventListener('drop', function (e) {
    alert(e.dataTransfer.getData('Text')); e.preventDefault(); 
    dragged.parentNode.removeChild(dragged);
});

var draggables = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < draggables.length; i++) {
    draggables[i].addEventListener("dragstart", function (e) {        
        dragged = this;
        e.dataTransfer.setData('Text', this.getAttribute('data-letter')); });
}