JSFiddle - React, Tailwind, and code Playground

by davestein

HTML

<ul id="full-list">
    <li class="group">
        <div class="group-name">Fruit</div>
        <ul class="group-projects">
            <li class="project">Apple</li>
            <li class="project">Strawberry</li>
            <li class="project">Blueberry</li>
            <li class="dummy">&nbsp;</li>
        </ul>
    </li>
    <li class="group">
        <div class="group-name">Vegetables</div>
        <ul class="group-projects">
            <li class="project">Aubergine</li>
            <li class="project">Broccolli</li>
            <li class="project">Lettuce</li>
            <li class="dummy">&nbsp;</li>
        </ul>
    </li>

    <li class="project">Random</li>
    <li class="project">Mango</li>

</ul>

CSS

.project, .group-name { padding: 5px; background-color: #CCC; border: solid 1px #AAA; }
.group li { border: none; background-color: #FFF; padding-left: 25px; }
.group-projects { border: solid 1px #AA0000; }
.project, .group { cursor: ns-resize; }
li.dummy { height: 25px; background-color: #EEEEFF; }

JavaScript

$('#full-list').sortable({

    items : '.group, .project' 
    
});