JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src=""></script>
<div class="row">
    <div id="droppable2" class="droppable col-xs-3">
        <p>Drop
            <br>here</p>
    </div>
    <div id="droppable2" class="droppable col-xs-3">
        <p>Drop
            <br>here</p>
    </div>
</div>
<div id="draggable">
    <p>Drag me to my target</p>
</div>

CSS

#draggable {
     width: 100px;
     height: 100px;
     padding: 0.5em;
     float: left;
     margin: 10px 10px 10px 0;
     background-color:yellow;
 }
 .After-draggable {
     width: 200px;
     height: 100px;
     padding: 0.5em;
     float: left;
     margin: 10px 10px 10px 0;
     background-color:yellow;
 }
 .container {
     height:500px;
     width:500px;
     background-color:gray;
     float:left;
 }
 .ui-draggable-handle {
     z-index: 1;
 }
 .ui-draggable-dragging {
     z-index: 10000!important
 }

JavaScript

$(function () {
    $("#draggable").draggable();
    $(".droppable").droppable({
        drop: function (event, ui) {

            $(this).find("p").html("Dropped!");
        }
    });
});