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">

   <div class="dragMe">drag me 1</div> 

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

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

</div>

<div id="sortableArea">

    <div class="sortable">

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

        <div class="sortable">

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

        </div>

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

    </div>



</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"

            });

        });