JSFiddle - React, Tailwind, and code Playground

by blowsie

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;
}
.drag, .drop {
    font-family:Arial;
    font-size:10px;
    text-align:center;
    line-height:50px;
    width:50px;
    height:50px;
    margin:10px;
    display:block;
}
.drag {
    background:#89CFF0;
    border:1px solid #000;
}
.drop {
    display:block;
    background:beige;
    border:1px solid #000;
}
.dropped {
   background-color: #EBC;
   border-color: #B89;
   }   
.active {  
   background-color: #CEB;
   border-color: #9B8;
   }

JavaScript

$('.drag')
      .drag("start",function( ev, dd ){
         $( this ).css('opacity',.75);
      })
      .drag(function( ev, dd ){
         $( this ).css({
            top: dd.offsetY,
            left: dd.offsetX
         });
      })
      .drag("end",function( ev, dd ){
         $( this ).css('opacity','');
      });
   $('.drop')
      .drop("start",function(){
         $( this ).addClass("active");
      })
      .drop(function( ev, dd ){
         $( this ).toggleClass("dropped");
      })
      .drop("end",function(){
         $( this ).removeClass("active");
      });
   $.drop({ mode:"overlap" });