JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div class="draggable">
    <div class="label">C1</div>
</div>
<div id="parent_drop" class="droppable">
    <div id="parent_label" class="label">D1</div>
    <div id="parent_counter" class="counter">0</div>
    <div id="child_drop" class="droppable">
        <div id="child_label" class="label">D2</div>
        <div id="child_counter" class="counter">0</div>
    </div>
</div>

CSS

.draggable {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    margin: 10px;
}
#parent_drop {
    width: 200px;
    height: 200px;
    border: 1px dotted black;
    margin: 10px;
}
#child_drop {
    width: 100px;
    height: 100px;
    border: 1px dotted black;
    margin: 50px;
}
.droppable {
    border: 1px solid green;
    background-color: white;
}
.droppable.over {
    background-color: yellow;
}
#dropgpable.has-draggable {
    border: 1px solid green;
}
.counter {
    margin: 2px;
}

JavaScript

$(".draggable").draggable({
    helper: 'clone'
});
$(".droppable").droppable({
    drop: function () {
        var ctr = parseInt($(this).children('.counter').text());
        $(this).children('.counter').text(ctr + 1);
        $(this).removeClass("over");
    },
    over: function () {
        $(this).addClass("over");
    },
    out: function () {
        $(this).removeClass("over");
    },
    greedy: true,
    tolerance: "pointer"
});