JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<ul>
    <li draggable="true"><span>01</span></li>
    <li draggable="true"><span>02</span></li>
    <li draggable="true"><span>03</span></li>
    <li draggable="true"><span>04</span></li>
    <li draggable="true"><span>05</span></li>
</ul>
<div></div>

CSS

div {
    width: 300px;
    height: 300px;
    border: 1px solid red;
}

JavaScript

document.querySelector('ul').addEventListener('dragstart', function(e) {
    var el = e.target;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', el.innerHTML);
}, false);
document.querySelector('div').addEventListener('dragover', function(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
}, false);
document.querySelector('div').addEventListener('drop', function(e) {
    e.preventDefault();
    console.log(e);
    e.dataTransfer.dropEffect = 'move';
    this.innerHTML = e.dataTransfer.getData('text/html');
    
}, false);