JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dragMe" style="background-color:lightblue; height:50px; width:50px;">Drag Me</div>
<div id="ctFilterDropArea" style="height:200px;background-color:lightgreen;">Drop Stuff Here</div>

CSS

.ctDropHover {
    outline:#FFBB00 solid 3px;
    background-color:#FFE59F;
}

JavaScript

$.fn.liveDroppable = function (opts) {
        if (!$(this).data("ctDropInit")) {
            $(this).data("ctDropInit", true).droppable(opts);
        }
};

$('#dragMe').draggable({
    cursor: "move",
    distance: 20,
    opacity: 0.7,
    helper: 'clone',
    start:startDroppable
});

    function startDroppable(){
$('#ctFilterDropArea').liveDroppable({
    hoverClass: "ctDropHover",
    drop: function (event, ui) {
    $( "#ctFilterDropArea" ).append($( this ).parent().html());
        //alert("Dropped!");
    }
});
}