JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drop">Drop here
<ul id="hidden">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
</div>
<ul id="toolbar">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

#drop {background: green;}

JavaScript

$('#toolbar').sortable({
    receive: function(){
        console.log('toolbar received component');
    },
    remove: function(){
        console.log('removed from this list.');
    },
    revert: true
});
$('#drop').droppable({
    drop: function(event, ui){
        console.log('dropped! omg!', event, $(event.target));
        var $li = $('<li>').appendTo('#hidden');
        $li.html($(event.target));
    },
    receive: function(event, ui){
        console.log('got it!');
    }
});
$('#toolbar li').draggable();

$('#hidden li').draggable({
    connectToSortable:'#toolbar',
});