JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dl.dropboxusercontent.com/u/14037764/Development/cdn/jquery.event.drag-2.2.js"></script>
<script src="https://dl.dropboxusercontent.com/u/14037764/Development/cdn/jquery.event.drag.live-2.2.js"></script>
<script src="https://dl.dropboxusercontent.com/u/14037764/Development/cdn/jquery.event.drop-2.2.js"></script>
<script src="https://dl.dropboxusercontent.com/u/14037764/Development/cdn/jquery.event.drop.live-2.2.js"></script>
<div class="drag">Drag</div>
<div id="dropWrap">
    <div class="drop">Drop</div>
</div>

CSS

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position:relative;
}
.drag, .drop {
    font-family:Arial;
    font-size:10px;
    text-align:center;
    line-height:50px;
    width:50px;
    height:50px;
    margin:0;
    display:block;
}
.drag {
    position:absolute;
    background:#89CFF0;
    border:1px solid #000;
}
.drop {
    display:block;
    background:beige;
    float:left;
    border: 1px solid #000;
    ;
}
.dropped {
    background-color: #EBC;
    border-color: #B89;
}
.active {
    background-color: #CEB;
    border-color: #9B8;
}
#dropWrap {
    padding-top:60px;
}

JavaScript

(function () {
    var $body = $("body"),
        newdrops = [],
        currentTarget = {},
        ondragstart = function () {

            $(this).css('opacity', .75);
        }, ondrag = function (ev, dd) {
            $(this).css({
                top: dd.offsetY,
                left: dd.offsetX
            });
        }, ondragend = function () {

            $(this).css('opacity', '');
            for (var i = 0, z = newdrops.length; i < z; i++)
            $(newdrops[i]).off('dropstart drop dropend').removeClass('tempdrop');
            newdrops = [];
        }, ondropstart = function (e) {
            if (currentTarget.dropstart === e.currentTarget) return;
            currentTarget.dropstart = e.currentTarget;
            currentTarget.dropend = null;
            console.log('start::' + e.currentTarget.id)
            $(this).addClass("active");
        }, ondrop = function () {
            $(this).toggleClass("dropped");
        }, ondropend = function (e) {
            if (currentTarget.dropend === e.currentTarget) return;
            currentTarget.dropend = e.currentTarget;
            currentTarget.dropstart = null;
            console.log('end::' + e.currentTarget.id)
            $(this).removeClass("active");
        };

    $body.on("dragstart", ".drag", ondragstart)
        .on("drag", ".drag", ondrag)
        .on("dragend", ".drag", ondragend)
        .on("dropstart", ".drop", ondropstart)
        .on("drop", ".drop", ondrop)
        .on("dropend", ".drop", ondropend);



    var cnt = 0;
    setInterval(function () {
        var dataDroppables = $body.data('dragdata')['interactions'] ? $body.data('dragdata')['interactions'][0]['droppable'] : [];

        var $newDrop = $('<div class="drop tempdrop" id="' + cnt + '">Drop</div>');
        cnt++;
        $("#dropWrap").append($newDrop);
        var offset = $newDrop.offset();
        var dropdata = {
            active: [],
            anyactive: 0,
            elem: $newDrop[0],
           ...