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

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(); });

var draggables = document.querySelectorAll('[draggable=true]');

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