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() {
                 $(this).addClass('red');
             },

             dragleave: function(event) {
                 var x = event.clientX, y = event.clientY,
                     elementMouseIsOver = document.elementFromPoint(x, y);
                 if(!$(elementMouseIsOver).closest('.red').length) {
                     $(this).removeClass('red');
                 }
            }
        });

$('#drag').bind({
                 dragstart: function(e) {
                     e.allowedEffect = "copy";
                     e.setData("text/plain", "test");
                 }
                });