JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-panel">
        <div class="container " id="container1">
            <h4>Container</h4>
            <div class="item ">1</div>
            <div class="item ">2</div>            
            <div class="container" id="container2">
                <h4>Container</h4>
                <div class="item ">3</div>            
                <div class="item ">4</div>            
            </div>            
            <div class="item ">5</div>
            <div class="item ">6</div>
        </div>
    </div>

CSS

#main-panel
            {
                width: 300px;
                position: relative;
            }
            .container
            {
                border: 1px solid black;
                background-color: lightyellow;    
                padding: 20px;
            }
            .container h4
            {
                height: 24px;
            }
            .item
            {
                border: 1px solid gray;
                background-color: greenyellow;    
                height: 24px;
            }

JavaScript

$(function () {
            $(".container").sortable({
                items: ".container, .item",
                revert: true,
                connectWith: ".container",
                start: function (event, ui) {
                    var index = $(ui.item).parent().children(".container, .item").index(ui.item);
                    posIni = index;
                },

                stop: function (event, ui) {
                    var index = $(ui.item).parent().children(".container, .item").index(ui.item);

                },

                receive: function (event, ui) {
                }

            });
        });