JSFiddle - React, Tailwind, and code Playground

by Rob Crowther

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(e) {
        var related = e.relatedTarget,
            inside = false;

        if (related !== this) {

            if (related) {
                inside = jQuery.contains(this, related);
            }

            if (!inside) {

                $(this).removeClass('red');
            }
        }

    }
});

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