JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">
    
    <ul id="sortable">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sortable Item 1</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sortable Item 2</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sortable Item 3</li>
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Sortable Item 4</li>
    </ul>
     <li class="drag ui-state-default">Draggable Item 1</li>
        <li class="drag ui-state-default">Draggable Item 1</li>
</div><!-- End demo -->

<div id="drop">Draggable & Droppable Item</div>

CSS

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
li { cursor:pointer; margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
li span { position: absolute; margin-left: -1.3em; }
#drop { width:300px; height:300px; background-color:#ff0000; }

JavaScript

$(function() {
    $('.drag').draggable({
        helper: 'clone',
        connectToSortable: '#sortable'
    });
    $("#sortable").sortable({
        connectWith: '#drop'
    });
    $("#drop").droppable({
        tolerance: 'pointer',
        connectWith: '#sortable',
        drop: function (evt, ui) {
            var $destination = $(this); 
            ui.draggable.appendTo( $destination ); 
        }
    }).draggable();
});