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:10px;
    display:block;
}
.drag {
    position:absolute;
    background:#89CFF0;
    border:1px solid #000;
}
.drop {
    display:block;
    background:beige;
    border:1px solid #000;
    float:left;
}
.dropped {
    background-color: #EBC;
    border-color: #B89;
}
.active {
    background-color: #CEB;
    border-color: #9B8;
}
#dropWrap {
    padding-top:60px;
}

JavaScript

var $body = $("body"),
    newdrops = [],
    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 () {
        $(this).addClass("active");
    }, ondrop = function () {
        $(this).toggleClass("dropped");
    }, ondropend = function () {
        $(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);




setInterval(function () {
    var dataDroppables = $body.data('dragdata')['interactions'] ? $body.data('dragdata')['interactions'][0]['droppable'] : [];
    
    var $newDrop = $('<div class="drop tempdrop">Drop</div>');
    $("#dropWrap").append($newDrop);
    var offset = $newDrop.offset();
    var dropdata = {
        active: [],
        anyactive: 0,
        elem: $newDrop[0],
        index: $('.drop').length,
        location: {
            bottom: offset.top + $newDrop.height(),
            elem: $newDrop[0],
            height: $newDrop.height(),
            left: offset.left,
            right: offset.left + $newDrop.width,
            top: offset.top,
            width: $newDrop.width
        },
        related: 0,
        winner: 0
    };
    $newDrop.data('dropdata', dropdata);
    dataDroppables.push($newDrop[0]);
    $newDrop.on("dropstart", ondropstart)
        .on("drop", ondrop)
        .on("dropend", ondropend);    
    $.event.special.drop.locate($newDrop[0], dropdata.index);
    newdrops.push($newDrop[0]);
}, 1000);