JSFiddle - React, Tailwind, and code Playground

by davestein

HTML

What is the best way to change the options so that everything remains the same, except group can't be dropped in group?<br /><br />

<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>
        </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>
        </ul>
    </li>

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

</ul>

CSS

body { padding: 25px; }
.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.ui-sortable-placeholder { background-color: #FFEEEE; visibility: visible !important; }
.group li.group.ui-sortable-placeholder  { display: none; }

JavaScript

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

    items : '.group, .project',
    helper : 'clone'    
    
}).on ( 'sortupdate', function(e,ui) {
    
   
    if ( ui.item.hasClass('group') && ui.item.parent().hasClass( 'group-projects' ) ) {
        ui.item.parent().closest( '.group' ).after( ui.item );
        
    }
    
    
}).on ( 'sort', function(e,ui) {
    
   
    if ( ui.placeholder.hasClass('group') && ui.placeholder.parent().hasClass( 'group-projects' ) ) {
        ui.placeholder.parent().closest( '.group' ).after( ui.placeholder);
        
    }
    
    
});