JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable1" class="ui-widget-content">
    <div class="dragcontent1class" id="dragcontent1id">
        <div>drag 1 some html codes</div>
    </div>
</div>
<div id="draggable1" class="ui-widget-content">
    <div class="dragcontent2class" id="dragcontent2id">
        <div>drag 2 some html codes</div>
    </div>
</div>
<div id="droppable" class="ui-widget-header">
    <div class="dropclass" id="dropid">
        <div>drop here</div>
    </div>
</div>

CSS

.ui-widget-content {
    width:80px;
    height:80px;
    padding:0.5em;
    float:left;
    margin:10px 10px 10px 0;
}
#draggable {
    width:80px;
    height:80px;
    padding:0.5em;
    float:left;
    margin:10px 10px 10px 0;
}
#droppable {
    width:100px;
    height:150px;
    padding:0.5em;
    float:left;
    margin:10px;
}

JavaScript

var cloned;

$('.ui-widget-content').click(function () {
    cloned = $(this).clone();
    alert("cloned:"+cloned);


});


$(".ui-widget-content").draggable({
    revert: true
});
$("#droppable").droppable({
    accept: ".ui-widget-content",
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    tolerance: "pointer"
});

$("#droppable").on("drop", function (event, ui) {
    $(this)
        .addClass("ui-state-highlight")
        .find("div")
        .html("Droped");
    cloned.appendTo('#droppable');
});