JSFiddle - React, Tailwind, and code Playground

by Pratik Bhonsle

HTML

<script src="https://raw.github.com/mjsarfatti/nestedSortable/master/jquery.ui.nestedSortable.js"></script>
<section id="accor dion">
    <ol class="sortable">
        <li id="list_1">
            <div>
                <h3><a href="#">Header</a></h3>
                <div>
                    <p>des fields.</p>
                </div>
            </div>
        </li>
        <li id="list_2">
            <div>Item 2</div>
            <div>
                <ol>
                    <li id="list_3"><div>Sub Item 2.1</div></li>
                    <li id="list_4"><div>Sub Item 2.2</div></li>
                    <li id="list_5"><div>Sub Item 2.3</div></li>
                    <li id="list_6"><div>Sub Item 2.4</div></li>
                </ol>
            </div>
        </li>
    </ol>
</section>

JavaScript

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

$(function() {
    var stop = false;
    $("#accordion h3").click(function(event) {
        if (stop) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });
    $("#accordion").accordion({
        header: "> ol > li > div > h3"
    }).nestedSortable({
        axis: "y",
        handle: "h3",
        stop: function() {
            stop = true;
        }
    });
});