[Help] - Dragula within another (or maybe another solution)

[lmarcelocc]

Hi all!

I'm trying to use ng2-dragula to accomplish something like this (please ignore the design, I just trying to find a solution for the functionality):

I need to sort, both parent categories and sub categories. But I'm having some issues trying to make it both work, since I need to have the sub category within the parent category, otherwise I will get an undesired dragula behavior:

<ul
      *ngFor="let category of categories"
      [dragula]='"categories"'
      dragulaName="categories">

      <li
        class="parent-draggable"
        id="{{ category.id }}">

        #{{category.id}} :: {{ category.name }}

          <ul *ngIf="category.subCategories.length > 0"
              [dragula]="category.subCategories.dragulaName"
              [attr.dragulaName]="category.subCategories.dragulaName">

            <li
              *ngFor="let subCategory of category.subCategories"
              id="{{ subCategory.id }}">

                #{{subCategory.id}} :: {{ subCategory.name }}

            </li>

          </ul>
      </li>

    </ul>

Here's a demo of what I've right now: https://stackblitz.com/edit/angular4-dragula

Anyone is able to help?

Thank you in advance!

[harangozop]

Hi @lmarcelocc I've made some modification to your demo: https://stackblitz.com/edit/angular4-dragula-icjbyr

You can achieve the desired behaviour by preventing the whole element from being dragged. Instead you can use a "handler" (like in the demo page's "Drag handles float your cruise?" section: https://valor-software.com/ng2-dragula/index.html).

[lmarcelocc]

Hi @peter9208,

that really makes sense and it's exactly the behavior I was expecting.

I really appreciate your support.

Thanks you again :)