JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div id="container">
<div id="dragContainer">
<div class="draggable">drag1</div>
<div class="draggable">drag2</div>
</div>
<div id="dropContainer">
<div class="droppable">drop1</div>
<div class="droppable">drop2</div>
</div>
</div>

CSS

#container{
  width:500px;
  height:500px;
  position:absolute;
  top:0px;
  left:0px;
  border:1px solid;
  -ms-transform: scale(0.5,0.5); /* IE 9 */
    -webkit-transform: scale(0.5,0.5); /* Safari */
    transform: scale(0.5,0.5);
}
#dragContainer,#dropContainer{
 width:200px;
  height:500px;
  position:relative;
  margin-top:0px;
  margin-left:0px;
  border:1px solid gray;
  float:left;
}
.draggable{
  width:50px;
  height:30px;
  background:#990000;
  border:1px solid;
  z-index:1;
}
.droppable{
  width:50px;
  height:30px;
  background:#aa0000;
  border:1px solid;
}

JavaScript

$(".draggable").draggable({
revert: 'invalid'
})
$(".droppable").droppable()