JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropzone">
  <div class="draggable"
   draggable="true" 
   ondragstart="event.dataTransfer.setData('text/plain',null)">
     Hi!.!
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<style>
.dropzone{
  width: 200px;
  min-height: 25px;
  margin-bottom: 300px;
  background-color: violet;
  border: 1px solid #9457EB;
  padding: 5px;
  transition: 1000m easy all;
}
.draggable{
  background-color: white;
  padding: 3px;
  text-align: center;
  transition: 400ms ease all;
  &:hover{
    background-color: yellow;
  }
}
</style>

CSS

.dropzone{
  width: 200px;
  min-height: 25px;
  margin-bottom: 300px;
  background-color: violet;
  border: 1px solid #9457EB;
  padding: 5px;
  transition: 1000m easy all;
}
.draggable{
  background-color: white;
  padding: 3px;
  text-align: center;
  transition: 400ms ease all;
}
.draggable:hover{
    background-color: yellow;
 }

JavaScript

var dragged;

document.addEventListener("drag", function( event ){
	//console.log("A");
}, false);

document.addEventListener("dragstart", function( event ){
		dragged = event.target;
    //console.log("B");
    event.target.style.opacity = .5;
}, false);


document.addEventListener("dragend", function( event ){
	
	event.target.style.opacity = "";
  //console.log("C");
}, false);

document.addEventListener("dragover", function( event ){
	event.preventDefault();
  //console.log("D");
}, false);

document.addEventListener("dragenter", function( event ){
	if( event.target.className == 'dropzone' ){
  	console.log("E");
  	event.target.style.background = "red";
  }
}, false);

document.addEventListener("dragleave", function( event ){
	if( event.target.className == 'dropzone' ){
  	console.log("F");
  	event.target.style.background = "";
  }
}, false);


document.addEventListener("drop", function( event ){
	event.preventDefault();
  if( event.target.className == "dropzone" ){
  	//console.log("G");
  	event.target.style.background = "";
    dragged.parentNode.removeChild(dragged);
    event.target.appendChild( dragged );
  }
}, false); 


// DOES NOT FIX THE PROBLEM
document.addEventListener("mousewheel", function( event ){
	event.preventDefault();
}, false);