JSFiddle - React, Tailwind, and code Playground

by djsbellini

HTML

<a href="javascript:void(0)" id="drag" draggable="true">Drag me</a>

<div id="drop" dropzone="copy">
    <div>
        Text node in parent
        <p>
            Text node in child
            <p>Text node in grandchild</p>
        </p>
        Text node in parent
    </div>
</div>

CSS

body {
    padding: 5px;
    font-family: Arial, sans-serif;
}
#drag {
    display: inline-block;
    text-decoration: none;
    border: 1px solid gray;
    color: #111;
    background-color: #dfdfdf;
    padding: 8px 14px;
    /*margin: 10px 0;*/
}
#drop {
    margin-top: 10px;
    background-color: #e3e3e3;
    padding: 8px;
}
#drop.over {
    background-color: #d1d1d1;
}
#drop.dragging {
    padding: 18px;
    border: 1px dashed gray;
}
#drop p {
    margin: 10px 0;
}
#drop * {pointer-events: none;}

CoffeeScript

$("#drop").bind
    dragenter: (e) -> $(@).addClass('over')
    dragleave: (e) -> $(@).removeClass('over')