JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drag" draggable="true">drag me</div>

<hr>

<div id="drop">
    drop here
    <p>child</p>
    parent
</div>

CSS

.red {
    background-color: red;
}

JavaScript

$('#drop').bind({
                 dragenter: function(ev) {
                     $(this).addClass('red');
                     ev.preventDefault();
                 },
                 
                 dragleave: function(event) {
                		event = event.originalEvent || event;
                    var currentElement = document.elementFromPoint(event.pageX, event.pageY);
                    if (!this.contains(currentElement)) {
											$(this).removeClass('red');
                    }
                 }
                });

$('#drag').bind({
                 dragstart: function(e) {
                     e = e.originalEvent;
                     e.effectAllowed = "copy";
                     e.dataTransfer.setData("text", "test");
                 }
                });