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: red;
border-color: #B89;
}
.active {
background-color: #CEB;
border-color: #9B8;
}
#dropWrap {
padding-top:60px;
}
JavaScript
$("body")
.on("dragstart", ".drag", function () {
$(this).css('opacity', .75);
})
.on("drag", ".drag", function (ev, dd) {
$(this).css({
top: dd.offsetY,
left: dd.offsetX
});
})
.on("dragend", ".drag", function () {
$(this).css('opacity', '');
})
.on("dropstart", ".drop", function () {
//$(this).addClass("active");
})
.on("drop", ".drop", function () {
$(this).toggleClass("dropped");
})
.on("dropend", ".drop", function () {
$(this).removeClass("active");
});
setInterval(function () {
$("#dropWrap").append('<div class="drop">Drop</div>');
// Do something here to update the dd.available
}, 1000)