JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mjsarfatti.com/sandbox/nestedSortable/jquery.mjs.nestedSortable.js"></script>
<ol class="sortable">
    <li id="list_368">
        <div>	<span class="disclose"><span></span></span>Driving Directions</div>
    </li>
    <li id="list_367">
        <div>	<span class="disclose"><span></span></span>Make a Reservation</div>
    </li>
    <li id="list_369">
        <div>	<span class="disclose"><span></span></span>Food Menu</div>
        <ol class="sortable">
            <li id="list_373">
                <div>	<span class="disclose"><span></span></span>Meals</div>
            </li>
            <li id="list_374">
                <div>	<span class="disclose"><span></span></span>Pizza & Pasta</div>
            </li>
            <li id="list_375">
                <div>	<span class="disclose"><span></span></span>Soup</div>
            </li>
        </ol>
    </li>
    <li id="list_371">
        <div>	<span class="disclose"><span></span></span>Drink Menu</div>
    </li>
    <li id="list_370">
        <div>	<span class="disclose"><span></span></span>Gift Cards</div>
    </li>
    <li id="list_372">
        <div>	<span class="disclose"><span></span></span>About Us</div>
    </li>
</ol>

CSS

ol {
    margin: 0;
    padding: 0;
    padding-left: 30px;
}
ol.sortable, ol.sortable ol {
    margin: 0 0 0 25px;
    padding: 0;
    list-style-type: none;
}
ol.sortable {
    margin: 1em 0;
}
.sortable li {
    margin: 5px 0 0 0;
    padding: 0;
}
.sortable li div {
    border: 1px solid #d4d4d4;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-color: #D4D4D4 #D4D4D4 #BCBCBC;
    padding: 6px;
    margin: 0;
    cursor: move;
    background: #f6f6f6;
    background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed));
    background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    background: linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
}
.sortable li div div {
    width: 60px;
    float: right;
    text-align: right;
    border: 0;
    background: transparent;
    margin-top: -6px;
}
.sortable li div div img {
    cursor: pointer;
}
.disclose {
    cursor: pointer;
    width: 10px;
    display: none;
}
.sortable li.mjs-nestedSortable-collapsed > ol {
    display: none;
}
.sortable li.mjs-nestedSortable-branch > div > .disclose {
    display: inline-block;
}
.sortable li.mjs-nestedSortable-collapsed > div > .disclose > span:before {
    content:'+ ';
}
.sortable li.mjs-nestedSortable-expanded > div > .disclose > span:before {
    content:'- ';
}

JavaScript

$('ol.sortable').nestedSortable({
    disableNesting: 'no-nest',
    forcePlaceholderSize: true,
    handle: 'div',
    helper: 'clone',
    items: 'li',
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div',
    isTree: true,
    startCollapsed: true,
    update: function () {
        order = $('ol.sortable').nestedSortable('serialize');
        console.log(order);
    }
});

$('.mjs-nestedSortable-collapsed').on('click', function () {
    $(this).toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
});