JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ut consequatur corporis quisquam porro sequi eligendi eum expedita itaque dolorum cum cupiditate accusantium possimus! Praesentium quis nihil nostrum numquam quam.</p>
<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>

<img src="//lorempixel.com/200/200/" alt="">

CSS

div {
    width: 200px;
    height: 200px;
    border: 1px solid red;
}
div.active {
    border: 1ps solid green;
}

JavaScript

document.querySelector('ul').addEventListener('dragstart', function(e) {
    e.dataTransfer.setData('text/plain', 'tst');
    e.dataTransfer.effectAllowed = 'copy';
}, false);

document.querySelector('div').addEventListener('dragenter', function(e) {
    e.preventDefault();
    //debugger;
    e.dataTransfer.dropEffect= 'move';
}, false);
document.querySelector('div').addEventListener('dragover', function(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect= 'move';
}, false);

document.querySelector('div').addEventListener('drop', function(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect= 'move';
    this.innerHTML = e.dataTransfer.getData('text/plain');
    e.dataTransfer.types.forEach(function(type) { console.log(e.dataTransfer.getData(type));});
    console.log(e.dataTransfer.dropEffect);
    console.log(e.dataTransfer.types);
}, false);