JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box-item-scroll-area">
            <div class="box-item-scroll-contents">

                <div class="box-item">
                    <div class="item-top-block">
                        <div class="left">
                            <a class="drag">drag</a>
                        </div>
                        <div class="right">
                            <div class="inner-top">
                                <div class="title-block">
                                    <div class="title-left-block"></div>
                                    <div class="title-middle-block">item 1</div>
                                    <div class="title-right-block"><a class="open">open</a></div>
                                </div>
                            </div>
                            <div class="inner-bottom">
                                <div class="item-objects-area">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box-item">
                    <div class="item-top-block">
                        <div class="left">
                            <a class="drag">drag</a>
                        </div>
                        <div class="right">
                            <div class="inner-top">
                                <div class="title-block">
                                    <div class="title-left-block"></div>
                                    <div class="title-middle-block">item 2</div>
                                    <div class="title-right-block"><a class="open">open</a></div>
                                </div>
                            </div>
                            <div class="inner-bottom">
                                <div class="item-objects-area">
                                </div>
                            </div>
                        </div>
                   ...

CSS

.box-item-scroll-area {
    width:400px;
    background-color: #ccc;
    height: 600px;
    padding:10px;
    overflow-x: hidden;
    overflow-y: auto;
}
.box-item-scroll-contents {
    position:static !important;
    overflow: hidden; /* Prevents the scroll on .box-item-scroll-area from going out of control when dragging a sortable below the bottom of the list */
}


.box-item {
    width: 100%;
    position: relative;
    background-color: #fff;
    margin:5px 0 5px 0;
}
.box-item .item-top-block {
    margin: 0;
    display: table;
    width: 100%;
}
.box-item .item-top-block > .left {
    display: table-cell;
    width: 13px;
    vertical-align: top;
    text-align: left;
    border-top: 1px solid #ccc;
    padding: 9px 0px 9px 5px;
}
.box-item .item-top-block > .left .drag {
    background-color: #2aabd2;
    cursor: pointer;
    height: 100%;
    min-height: 100%;
    display: inline-table;
    width:8px;
}
.box-item .item-top-block > .right {
    display: table-cell;
    padding: 5px 0px 5px 0px;
    border-top: 1px solid #ccc;
    width: auto;
}
.box-item .inner-bottom .item-objects-area {
    clear: both;
    width: 100%;
    padding: 10px 0px 7px 10px;
    position:static !important;
    overflow: hidden;
    display: none;
}
.box-item .inner-top .title-block {
    display: table;
    width: 100%;
}
.box-item .inner-top .title-block .title-middle-block {
    display: table-cell;
    vertical-align: top;
    padding: 5px 0 5px 10px;
}
.box-item .inner-top .title-block .title-right-block {
    display: table-cell;
    width: 73px !important;
    padding: 5px 5px 0px 0px;
    text-align: right;
    vertical-align: top;
}


.box-item-object {
    padding:5px 0 5px 0;
    display: block;
    width: 100%;
    margin: 5px 0 5px 0;
}
.box-item-object .drag-inner {
    background-color: #4cae4c;
    cursor: pointer;
    height: 100%;
    min-height: 100%;
    display: inline;
    width:8px;
    margin-right: 10px;
}
.box-item-object .right {
    display:...

JavaScript

$( document ).ready(function() {

    $(".box-item-scroll-contents").sortable({
        appendTo: "body",
        connectWith: ".item-objects-area,.box-item-scroll-contents",
        handle: ".drag",
        items: ".box-item,.box-item-object"
    }).disableSelection();

    $(".open").on("click", function(){
        var objArea = $(this).closest(".box-item").find(".item-objects-area");
        if( objArea.is(":visible") ){
        		if (objArea.hasClass('ui-sortable')) {
        				objArea.sortable("destroy");
            }
            objArea.hide();
        }
        else{
            objArea.show();
            if (!objArea.hasClass('ui-sortable')) {
            	objArea.sortable({
        				appendTo: "body",
        				connectWith: ".box-item-scroll-contents,.item-objects-area",
        				handle: ".drag-inner",
        				items: ".box-item-object,.box-item"
    					}).disableSelection();
            }
        }
    });
});