JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drag" draggable="true">Перетяни меня на зеленую область!</div>
<br></br></br></br>
<div id="drop">+</div>

CSS

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#drag {
    font-size: 13px;
    background: blue;
    width: 200px;
    color: #FFF;
    cursor: default
}

#drop {
    font-size: 20px;
    padding: 12px;
    background: green;
    width: 180px;
    text-align: center;
    color: #FFF;
    cursor: default
}

JavaScript

var dragEl = document.getElementById("drag");
var dropEl = document.getElementById("drop");

dragEl.addEventListener('dragstart', function(e){
	e.dataTransfer.setData('data', "44");
    console.log("dragstart");
}, false);


dropEl.addEventListener('dragenter', function(e){
	console.log("dragenter")
}, false);

dropEl.addEventListener('dragover', function(e){
	e.preventDefault();
    return false;
}, false);

dropEl.addEventListener('drop', function(e){
	e.preventDefault();
    return false;
}, false);