在Angular6的同一个div中使用ng2 dragula进行两个拖放？

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>