JSFiddle - React, Tailwind, and code Playground

by AlexanderPatel

HTML

<script src="https://rawgit.com/ilikenwf/nestedSortable/2.0alpha/jquery.mjs.nestedSortable.js"></script>
<header>
        <h1>nestedSortable jQuery Plugin</h1>

        <h2>2.0</h2>
    </header>

    <section>
        <p>This is the demo page for the nestedSortable jQuery plugin.</p>

        <p><strong>Follow the development, read the docs and download the
        latest version directly from the <a href="https://github.com/ilikenwf/nestedSortable">GitHub
        page</a>.</strong>
        </p>
    </section>
    <!-- END section -->

    <section id="demo">
        <ol class="sortable ui-sortable mjs-nestedSortable-branch mjs-nestedSortable-expanded">

            <li style="display: list-item;" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded" id="menuItem_2">
                <div class="menuDiv">
                    <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
			   <span></span>
                    </span>
                    <span title="Click to show/hide item editor" data-id="2" class="expandEditor ui-icon ui-icon-triangle-1-n">
			   <span></span>
                    </span>
                    <span>
			   <span data-id="2" class="itemTitle">a</span>
                    <span title="Click to delete item." data-id="2" class="deleteMenu ui-icon ui-icon-closethick">
			   <span></span>
                    </span>
                    </span>
                    <div id="menuEdit2" class="menuEdit hidden">
                        <p>
                            Content or form, or nothing here. Whatever you want.
                        </p>
                    </div>
                </div>
                <ol>
                    <li style="display: list-item;" class="mjs-nestedSortable-branch mjs-nestedSortable-expanded" id="menuItem_4">
                        <div class="menuDiv">
                            <span title="Click to show/hide children" class="disclose ui-icon ui-icon-minusthick">
				  ...

CSS

html {
        background-color: #eee;
    }
    body {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        color: #444;
        background-color: #fff;
        font-size: 13px;
        font-family: Freesans, sans-serif;
        padding: 2em 4em;
        width: 860px;
        margin: 15px auto;
        box-shadow: 1px 1px 8px #444;
        -mox-box-shadow: 1px 1px 8px #444;
        -webkit-box-shadow: 1px -1px 8px #444;
    }
    a,
    a:visited {
        color: #4183C4;
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }
    pre,
    code {
        font-size: 12px;
    }
    pre {
        width: 100%;
        overflow: auto;
    }
    small {
        font-size: 90%;
    }
    small code {
        font-size: 11px;
    }
    .placeholder {
        outline: 1px dashed #4183C4;
    }
    .mjs-nestedSortable-error {
        background: #fbe3e4;
        border-color: transparent;
    }
    #tree {
        width: 550px;
        margin: 0;
    }
    ol {
        max-width: 450px;
        padding-left: 25px;
    }
    ol.moved,
    ol.moved ol,
    ol.sortable,
    ol.sortable ol {
        list-style-type: none;
    }
    .moved li div,
    .sortable li div {
        border: 1px solid #d4d4d4;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        cursor: move;
        border-color: #D4D4D4 #D4D4D4 #BCBCBC;
        margin: 0;
        padding: 3px;
    }
    li.mjs-nestedSortable-collapsed.mjs-nestedSortable-hovering div {
        border-color: #999;
    }
    .disclose,
    .expandEditor {
        cursor: pointer;
        width: 20px;
        display: none;
    }
    .moved li.mjs-nestedSortable-collapsed > ol,
    .sortable li.mjs-nestedSortable-collapsed > ol {
        display: none;
    }
    .moved li.mjs-nestedSortable-branch > div > .disclose,
    .sortable li.mjs-nestedSortable-branch > div > .disclose {
       ...

JavaScript

$().ready(function() {
        $('li').on('click', function(e) {
            e.stopPropagation();
            $(this).toggleClass('selected');
        });
        var ns = $('ol.sortable, ol.moved').nestedSortable({

            connectWith: 'ol.moved, ol.sortable',

            forcePlaceholderSize: true,
            handle: 'div',
            helper: function(e, item) {
                console.log('parent-helper');
                console.log(item);
                if (!item.hasClass('selected'))
                    item.addClass('selected');
                var elements = $('.selected').not('.ui-sortable-placeholder').clone();
                var helper = $('<ul/>');
                item.siblings('.selected').addClass('hidden');
                return helper.append(elements);
            },
            start: function(e, ui) {
                var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
                ui.item.data('items', elements);
            },
            receive: function(e, ui) {
                ui.item.before(ui.item.data('items'));
            },
            stop: function(e, ui) {
                ui.item.siblings('.selected').removeClass('hidden');
                $('.selected').removeClass('selected');
            },
            items: 'li',
            opacity: .6,
            placeholder: 'placeholder',
            revert: 250,
            tabSize: 25,
            tolerance: 'pointer',
            toleranceElement: '> div',
            maxLevels: 4,
            isTree: true,
            expandOnHover: 700,
            startCollapsed: false,
            change: function() {
                console.log('Relocated item');
            }
        });

        $('.expandEditor').attr('title', 'Click to show/hide item editor');
        $('.disclose').attr('title', 'Click to show/hide children');
        $('.deleteMenu').attr('title', 'Click to delete item.');

        $('.disclose').on('click', function() {
       ...