JSFiddle - React, Tailwind, and code Playground

by magicaj

HTML

<div class="form-wizard">
    <fieldset>
        <legend>Categories</legend>
        <div class="long-panel replaceable">
            <p>
                <a class="expand-categories" href="#">Expand All</a>
            </p>
            <ul class="test-categories-list panel-list ui-sortable">
                <li>
                    <p id="category_254" class="test-category">
                        POC
                        <a class="toggle-list" href="/regression_test/test_categories/254">+</a>
                    </p>
                    <ul id="test-cases-list-254" class="test-cases ui-sortable" style="">
                        <li id="test-case-256" class="test-case" style="">
                            <a href="/regression_test/test_cases/256">Demonstration</a>
                        </li>
                        <li id="test-case-288" class="test-case" style="">
                            <a href="/regression_test/test_cases/288">4322</a>
                        </li>
                        <li id="test-case-292" class="test-case" style="">
                            <a href="/regression_test/test_cases/292">sdfsdf</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <p id="category_277" class="test-category current">
                        sdfsdf
                        <a class="toggle-list" href="/regression_test/test_categories/277">-</a>
                    </p>
                    <ul id="test-cases-list-277" class="test-cases ui-sortable" style="display: block;">
                        <li id="test-case-290" class="test-case" style="">
                            <a href="/regression_test/test_cases/290">fsdfsdf</a>
                        </li>
                        <li id="test-case-293" class="test-case" style="">
                            <a href="/regression_test/test_cases/293">vcb</a>
                        </li><li id="test-case-291" class="test-case"...

CSS

ul { margin-left: 10px; padding:5px; }
li { padding: 5px; }
.ui-state-highlight { background:yellow; }

JavaScript

$(function() {
    $(".test-cases").sortable({
        connectWith: ".test-cases",
        placeholder: "ui-state-highlight",
        forcePlaceholderSize: true
    });

    $(".test-categories-list").sortable({
        handle: ".test-category",
        placeholder: "ui-state-highlight",
        forcePlaceholderSize: true
    });
});