JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="draggables">
    <li>Draggable 1</li>
    <li>Draggable 2</li>
    <li>Draggable 3</li>
</ul>
<br>
<div id="sortable">
    <div>Existing element</div>
    <div>Another existing element</div>
</div>

CSS

body { 
    font-size: 13px;
    line-height: 1.231;
    font-family: Arial, Verdana, sans-serif;
    color: #222;
    padding: 25px;
}

JavaScript

$('#sortable').sortable().droppable({
    // Drop should only fire when a draggable element is dropped into the sortables,
    // and NOT when the sortables themselves are sorted (without something being dragged into).
    drop: function(ev, ui){
        $(ui.draggable).html('<div>TEMPLATE</div>');
    }
});
$('#draggables li').draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    revert: 'invalid',
    cursor: 'move'
});