JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div id="draggable-items">
<ul>
   <li class="dragMe">drag me 1</li> 

   <li class="dragMe">drag me 2</li> 

   <li class="dragMe">drag me 2</li> 
</lu>
</div>

<div id="sortableArea">

    <ul class="sortable">

        <li class="sortableItem">SortbleItem 1</li>

        <ul class="sortable">

            <li class="sortableItem">SortbleItem 2</li>

        </ul>

        <li class="sortableItem">SortbleItem 3</li>
            
    </ul>
                
</div>

CSS

#draggable-items 

        {

            float:left;

            width:150px;

            margin-right:50px;

        }

        #sortableArea 

        {

            float:left;

            border:1px solid #000;

            width:500px;

            padding:10px;

        }

        

        .dragMe { background-color:#ccc; border:1px solid #eee; margin-bottom:10px; }

        

        .placeholder {  background-color: #fbec88 !important; height: 5px;}

        

        .sortable { border:1px solid #ccc; margin:10px; padding:10px; }

JavaScript

$(function () {

            $(".sortable").sortable({

                connectWith: ".sortable",

                forcePlaceholderSize: false,

                items: ".sortableItem",

                placeholder: 'placeholder',

                opacity: '.5',

                appendTo: "body",

                delay: 100,

                distance: 10,

                containment: 'document'

            }).disableSelection();



            $(".dragMe").draggable({

                greedy: true,

                connectToSortable: ".sortable",

                helper: "clone"

            });

        });