JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<h4>droppable list</h4>
<ul class="droppable"> 
</ul>

<h4>draggable list</h4>
<ul  class="drag">
<li class="draggable"> Item 1</li>
<li class="draggable"> Item 2</li>
</ul>

CSS

.droppable, .drag{width:80%;padding:20px 0px;border:2px solid #000;margin:10px auto;}
      
        li, ul {
            list-style-type: none;
        }

JavaScript

$(function() {
    $( ".drag li" ).each(function(){
        $(this).draggable({
            helper: "clone"
        });
    });

    $( ".droppable" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            var targetElem = $(this).attr("id");
            $( ui.draggable ).clone().appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});