Nested list inside Sortable list

Topic: Nested list inside Sortable list

Timo Werkhoven asked 2 years ago

Expected behavior I have found the sortable items nested documentation from the drag and drop api, but i would like to combine the sortable list and the sortable items nested. I would like to make a nested list inside of a sortable list. Is there any way something like this would be possible?

Actual behavior The nested list doesn't behave as a nested list.

Resources (screenshots, code snippets etc.)

<div class="d-flex absoluteFormList ">
    <ul id="formFieldsList" data-mdb-sorting="false" data-mdb-sortable="sortable" class="list-unstyled sortable-list border my-0 p-3 formFieldsList" data-mdb-connected-list="#formFieldArea" data-mdb-copy="true">
        <h4 class="text-center pt-2 pb-3 border-bottom" >Formuliervelden</h4>
        <li id="formTitle" class="border border-dark sortable-item formField formTitle"  data-field="left" data-type="formTitle" ><i class="fa-solid fa-bold me-3"></i>Titel</li>
    </ul>
</div>

<div class="border mx-2 p-3 formArea">
    <h4 class="text-center pt-2 pb-3 border-bottom" data-type="">Sleep formuliervelden hier  <i class="fa-solid fa-gear generalSettingsIcon"></i></h4>
    <fieldset id="formFieldArea" data-mdb-sortable="sortable" class="list-unstyled sortable-list formFieldArea" data-mdb-connected-list="#formFieldsList"> 

        <p>here my other list items</p>

        <div id="sortable-multi-1-1" data-mdb-sortable="sortable" class="sortable-list d-flex align-items-start" data-mdb-item-class="sortable-item-nested"></div>
            <div id="sortable-multi-2-1" data-mdb-sortable="sortable" class="sortable-item-nested" data-mdb-connected-list="#sortable-multi-2-2" data-mdb-drag-handle=".drag-handler">
                <h4 class="text-center pt-2 drag-handler">Done</h4>
                <div class="sortable-item">item 6</div>
            </div>
        </div>

    </fieldset>
</div>

Grzegorz Bujański staff commented 2 years ago

Unfortunately, I don't understand how it would work. Please add a snippet with a more extensive example and and describe in more detail what you would like to sort. From which list to which to drag items etc.

Timo Werkhoven commented 2 years ago

Hello,

I have created a snippet here: https://mdbootstrap.com/snippets/standard/timo_werkhoven/4090190

I will explain in more detail what i would like to do. I want to make a sortable list with the drag and drop api, but inside of that list i would like to create a nested item. A user should be able to drag items from the sortable list inside of this nested item. This nested item should behalve just like a regular sortable item, but with its own sortable items inside.

Bassicly what i want to do is combine the Sortabe list that is provided in the documentation with the nested list from the documentation. In my snipped you can see that i have created a nested list inside of a sortable list. I can drag this item around just like a normal list item, but when i do the contents of the nested list come out of the nested list and into the parent sortalbe list. Is there any way something like this would be possible?

Add comment

Grzegorz Bujański staff answered 2 years ago