JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://f.cl.ly/items/0P311r3a2x2C1x0z1w2R/jquery.ui.nestedSortable.js"></script>
<ol class="sortable">
    <li id="list_1_1"><div>Item 1.1</div>
    <li id="list_1_2"><div>Item 1.2</div>
        <ol>
            <li id="list_1_3"><div>Sub Item 1.2.1</div>
            <li id="list_1_4"><div>Sub Item 1.2.2</div>
            <li id="list_1_5"><div>Sub Item 1.2.3</div>
            <li id="list_1_6"><div>Sub Item 1.2.4</div>
        </ol>
    <li id="list_1_7" class="no-nest"><div>Item 1.3 (no-nesting)</div>
    <li id="list_1_8" class="no-nest"><div>Item 1.4 (no-nesting)</div>
    <li id="list_1_9"><div>Item 1.5</div>
    <li id="list_1_10"><div>Item 1.6</div>
        <ol>
            <li id="list_1_11"><div>Sub Item 1.6.1</div>
            <li id="list_1_12" class="no-nest"><div>Sub Item 1.6.2 (no-nesting)</div>
            <li id="list_1_13"><div>Sub Item 1.6.3</div>
            <li id="list_1_14"><div>Sub Item 1.6.4</div>
        </ol>
    <li id="list_1_15"><div>Item 1.7</div>
    <li id="list_1_16"><div>Item 1.8</div>
</ol>

<ol class="sortable">
    <li id="list_2_1"><div>Item 2.1</div>
    <li id="list_2_2"><div>Item 2.2</div>
        <ol>
            <li id="list_2_3"><div>Sub Item 2.2.1</div>
            <li id="list_2_4"><div>Sub Item 2.2.2</div>
            <li id="list_2_5"><div>Sub Item 2.2.3</div>
            <li id="list_2_6"><div>Sub Item 2.2.4</div>
        </ol>
    <li id="list_2_7" class="no-nest"><div>Item 2.3 (no-nesting)</div>
    <li id="list_2_8" class="no-nest"><div>Item 2.4 (no-nesting)</div>
    <li id="list_2_9"><div>Item 2.5</div>
    <li id="list_2_10"><div>Item 2.6</div>
        <ol>
            <li id="list_2_11"><div>Sub Item 2.6.1</div>
            <li id="list_2_12" class="no-nest"><div>Sub Item 2.6.2 (no-nesting)</div>
            <li id="list_2_13"><div>Sub Item 2.6.3</div>
            <li id="list_2_14"><div>Sub Item 2.6.4</div>
        </ol>
    <li id="list_2_15"><div>Item 2.7</div>
    <li...

CSS

ol.sortable, ol.sortable ol {
    margin: 0 0 0 25px;
    padding: 0;
    list-style-type: none;
}

ol.sortable {
    width: 42.5%;
    float: left;
    margin: 5% 0 5% 5%;
}

.sortable li {
    margin: 7px 0 0 0;
    padding: 0;
}

.sortable li div {
    border: 1px solid black;
    padding: 3px;
    margin: 0;
    cursor: move;
}

.sortable li[id^="list_1_"] > div {
    background: #fcc;
}

.sortable li[id^="list_2_"] > div {
    background: #ffc;
}

JavaScript

$('ol.sortable').nestedSortable({
    disableNesting: 'no-nest',
    forcePlaceholderSize: true,
    handle: 'div',
    helper: 'clone',
    items: 'li',
    maxLevels: 10,
    opacity: .6,
    placeholder: 'placeholder',
    revert: 250,
    tabSize: 25,
    tolerance: 'pointer',
    toleranceElement: '> div',
    
    /* The magic tric: */
    connectWith: '.sortable'
});