Very late to comment, but take a look at this comment: #1979 (comment)

So if you take a look at the source code for nested lists:

Lines 312 to 318 in 0656d62

    
           <div class="list-group-item nested-2">Item 2.2 
        
           	<div class="list-group nested-sortable"> 
        
           		<div class="list-group-item nested-3">Item 3.1</div> 
        
           		<div class="list-group-item nested-3">Item 3.2</div> 
        
           		<div class="list-group-item nested-3">Item 3.3</div> 
        
           		<div class="list-group-item nested-3">Item 3.4</div> 
        
           	</div>

we can classify list items as those that do not have div children and "folders" as those that have children, specifically a div with class "list-group". Disclaimer, this is just my specific use case if you're familiar with that interface there; otherwise, the only other way I can describe the following is like a "filesystem". Using the aforementioned comments code, set every "list-group-item" to have an attribute "data-level" to specify depth, then:

onMove(ev) {
            const lvl = parseInt(ev.related.getAttribute("data-level"));
            if (ev.dragged.querySelector(".list-group") && lvl >= 2)
                return false;
            const diff = parseInt(ev.dragged.getAttribute("data-level")) - lvl;
            ev.dragged.setAttribute("data-level", lvl);
            for (let x of ev.dragged.querySelectorAll(".list-group-item")) {
                x.setAttribute("data-level",
                    parseInt(x.getAttribute("data-level")) - diff
                )
            }
        }

where that last for loop is for constantly updating the level. return false will prevent the item from dropping. 3 is the depth. It's up to you to make up whatever conditions and initial levels are given.

For my specific use case, I only allowed one nested folder. If the level start from 0, then I could have one folder inside another folder but that was it. That second folder could still contain items though. To accomplish this, the if statement should have an AND i.e. && that asks ev.dragged.querySelector(".list-group") basically checking if the currently dragged item is a folder.

	<div class="list-group-item nested-2">Item 2.2
	<div class="list-group nested-sortable">
	<div class="list-group-item nested-3">Item 3.1</div>
	<div class="list-group-item nested-3">Item 3.2</div>
	<div class="list-group-item nested-3">Item 3.3</div>
	<div class="list-group-item nested-3">Item 3.4</div>
	</div>

Nested sortable max level. #1867

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions