JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="drag-elements">
    <li draggable="true">A</li>
    <li draggable="true">B</li>
    <li draggable="true">C</li>
</ul>
<ul id="drop-target"></ul>

CSS

ul{
    min-height:100px;
    background-color:#EEE;
    margin:20px;
}
ul li{
    background-color:#CCC;
    padding:10px;
    margin-bottom:10px;
}

JavaScript

var target = document.querySelector('#drop-target');

var dragElements = document.querySelectorAll('#drag-elements li');

var elementDragged = null;

for (var i = 0; i < dragElements.length; i++) {
    
    dragElements[i].addEventListener('dragstart', function(e) {
        e.dataTransfer.setData('text', this.innerHTML);
        elementDragged = this;
    });
    
    dragElements[i].addEventListener('dragend', function(e) {
        elementDragged = null;
    });
}

target.addEventListener('dragover', function(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
    return false;
});

target.addEventListener('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    this.innerHTML = 'Dropped ' + e.dataTransfer.getData('text');
    
    document.querySelector('#drag-elements').removeChild(elementDragged);
    
    return false;
});