Два перетаскивания с использованием ng2 dragula в одном div в Angular6?

Question

Используя ng2-dragula, я могу легко перетаскивать списки в div, но у меня есть еще один список в том же div, когда я даю dragula этому списку, он может попасть в другой список и наоборот,но мне это не нужно.мне нужно ограничить перетаскивание из одного списка в другой.

первый список - планирование аккаунта, операции с аккаунтом и т. д. на изображении вышевторой список - это содержимое виджета 1, содержимое виджета 2 и т. д. в планировании учетной записи, мне нужно ограничить перетаскивание списка виджетов только в контейнере планирования учетной записи.

<div class="account-detail-container">
  <button mat-raised-button class="add-cntnr-btn" color="accent" (click)="addContainer()">ADD</button>
  <ul>
    <div class="containers" dragula="RIGHT" [(dragulaModel)]="list">
      <li *ngFor="let detail of details; let idx=index">

        <mat-expansion-panel>
          <mat-expansion-panel-header>
              <!-- (dblclick)="contEdit(idx)" -->
            <p id="myP{{idx}}" >{{detail.title}}</p>

          </mat-expansion-panel-header>
          <!-- <div id="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div> -->
          <div class="drag-cards" dragula="RIGHT" [(dragulaModel)]="list">
            <div class="card-display" *ngFor="let item of detail.subWidget; let i=index">

              <div class="fuse-card" (dblclick) = "editCard()">
                <div class="align-down">
                  <button class="card-options" mat-icon-button [matMenuTriggerFor]="card19Menu" aria-label="more">
                    <mat-icon>more_vert</mat-icon>
                  </button>

                  <mat-menu #card19Menu="matMenu">
                    <button (click) = "editCard()" mat-menu-item>
                      <mat-icon>edit</mat-icon>
                      <span>Edit</span>
                    </button>
                    <button mat-menu-item (click)="deleteCard(i)">
                      <mat-icon>delete</mat-icon>
                      <span>Delete</span>
                    </button>
                    <button id="btn-min-{{i}}" class="min-max-name" (click)="collapseCard(i)" mat-menu-item>
                      <mat-icon>expand_less</mat-icon>

                      <span>Minimize</span>
                    </button>
                  </mat-menu>
                </div>
                <div class="p-16">
                  <div class="h1">{{item.title}}</div>

                </div>

                <div id="content-min-{{i}}" class="p-16 pt-0 line-height-1.75 card-content">
                  {{item.content}}
                </div>

                <div class="social-icons">
                  <a>
                    <mat-icon>thumb_up</mat-icon>
                  </a>
                  <a>
                    <mat-icon>comment</mat-icon>
                  </a>
                </div>

              </div>
            </div>
          </div>

          <!-- <div class="card-display">
                  <div class="fuse-card">

                          <div class="p-16">
                              <div class="h1">{{detail.content}}..</div>

                          </div>

                          <div class="p-16 pt-0 line-height-1.75">
                              Cards provide context and an entry point to more robust information and views, and
                              their content and quantity can vary greatly.
                          </div>

                      </div>
          </div> -->







        </mat-expansion-panel>
        <ul class="acc_icons">
          <li>
            <a>
              <mat-icon (click)="openDialog()">add</mat-icon>
            </a>
          </li>
          <li>
            <a>
              <mat-icon (click)="deleteAllCard()">delete</mat-icon>
            </a>
          </li>
        </ul>
      </li>
    </div>
  </ul>
</div>