JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <div class="children">+</div>
</div>
<span draggable="true">Try dragging this text inside</span>

CSS

#box {
    position: relative;
    width:200px;
    height:200px;
    border: 2px dashed #333;
    margin:20px;
}
#box.hover {
    background:#eee;
    border: 2px dashed #000;
}
#box.hover:after {
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
}
#box .children {
    font-size:50pt;
    margin:55px 80px;
}

JavaScript

var dragOver = function (e) {
        e.preventDefault();
        this.classList.add('hover');
    };

    var dragLeave = function (e) {
        this.classList.remove('hover');
    };


    var dragDrop = function (e) {
        this.classList.remove('hover');
        window.alert('Dropped');
    };

    var dropArea = document.getElementById('box');

    dropArea.addEventListener('dragover', dragOver, false);
    dropArea.addEventListener('dragleave', dragLeave, false);
    dropArea.addEventListener('drop', dragDrop, false);