JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">
    
    <ul id="draggable">
        <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><img src="http://scratch.mit.edu/forums/img/sb_no_nums/move_steps.png" alt="move () steps" /></li>
    </ul>
    <br /><br /><br />
    <hr />
    <ul id="hat"><li><img src="http://scratch.mit.edu/forums/img/sb_no_nums/whengreenflagclicked.png" alt="when green flag clicked" /></li>
    <ul id="sortable">
        <li></li>
    </ul>
    </ul>
</div>

CSS

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0; padding:4px; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }

JavaScript

$(function() {
  $( "#sortable" ).sortable({
            revert: true
        });
        $( "#draggable" ).draggable({
            connectToSortable: "#sortable",
            helper: "clone",
            revert: "invalid"
        });
    $( "#hat" ).draggable();
        $( "ul, li" ).disableSelection();
});