JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dragMe">Drag me!</div>
<div id="container"></div>

CSS

#container {
    border: solid black 1px;
    height: 100px;
    width: 100px;
}

.orangeBox {
    height: 100px;
    width: 100px;
    background-color: orange
}

JavaScript

$('.dragMe').draggable({
    helper: 'clone',
});

function makeNewDroppable(event, ui) {
    alert("I've been dropped!");
    var orangeBox = $(document.createElement('div')).addClass('orangeBox');
    $('#container').append(orangeBox);
    orangeBox.droppable({ accept: '.dragMe' });
}

$('#container').droppable({
    accept: '.dragMe',
    drop: makeNewDroppable
});