cdkDrag не видит зону сброса

Question

У меня проблема с cdkDrag.Он работал нормально, но теперь произошло нечто странное, и я могу перетащить элемент, но он не может увидеть зону перетаскивания.Я могу перетащить элемент во весь DOM, но он не попадает в зону удаления.Между ними пять списков, и я хотел бы перетаскивать элементы.

Элемент следует перетаскивать с заголовком карты, но с примечанием к карте, которое остается в списке.

Здесьтакое HTML-код:

<div class="container p-5">
  <div class="row">
    <div class="col-12 text-right">
      <div class="accordion" id="newNote">
        <div class="card">
          <h4 class="mb-0">
            <button type="button" class="btn text-white green accent-3 btn-lg btn-block" data-toggle="collapse"
              data-target="#noteAdd" aria-expanded="true" aria-controls="collapseOne">
              Dodaj zadanie<mdb-icon fas icon="plus-circle" class="ml-1"></mdb-icon>
            </button>
          </h4>
          <div id="noteAdd" class="collapse" aria-labelledby="headingOne" data-parent="#newNote">
            <div class="card-body">
              <div class="container p-2">
                <form (ngSubmit)="onSubmit()" class="row">
                  <div class="col-6">
                    <div class="md-form">
                      <input type="text" id="taskitem" class="form-control" mdbInput [(ngModel)]="task.title"
                        name="task">
                      <label for="taskitem">Dodaj zadanie</label>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="md-form">
                      <select class="form-control" [(ngModel)]="task.list" name="list">
                        <option selected value="todo">Do zrobienia</option>
                        <option value="progress">W trakcie</option>
                        <option value="done">Wykonane</option>
                        <option value="cancelled">Anulowane</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-12">
                    <div class="md-form">
                      <textarea class="md-textarea form-control" rows="5" id="noteText" type="text" length="160"
                        mdbCharCounter mdbInput [(ngModel)]="task.note" name="note"></textarea>
                      <label for="noteText">Dodaj notatkę:</label>
                    </div>
                  </div>
                  <div class="col-12 text-right">
                    <input type="submit" value="Dodaj" mdbBtn color="default">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container p-4">
      <div class="row row-height">

        <div class="col-sm-3" borderColor="border-info">
          <div class="card cyan accent-4">
            <div class="card-header">
              <mdb-card-text class="text-white text-center">Zrób
                <span [ngSwitch]="mainList.todo.length >0">
                  <span *ngSwitchCase="true">
                    <span class="badge badge-light badge-pill mx-2"> {{mainList.todo.length}}</span>
                  </span>
                  <span *ngSwitchCase="false">
                    <span><i class="far fa-clock mx-2"></i></span>
                  </span>
                </span>
              </mdb-card-text>
            </div>
            <cdk-drop id="todo" class="listme list-group card-margin" #todoList [data]="mainList.todo"
              [connectedTo]="[progressList, doneList, cancelledList, deleteList]" (dropped)="drop($event)">
              <div class="list-group-item list-group-item-info" *ngIf="mainList.todo.length < 1">
                <p class="grey-text text-center">pusto</p>
              </div>
              <div class="list-group-item-action list-group-item-info"
                *ngFor="let item of mainList.todo; let i = index ">
                <h6 class="note note-info" cdkDrag>{{ item.title.substring(0,20) | titlecase }}</h6>
                <article (click)="changeModal(item)" data-toggle="modal" data-target="#openModal" class="note-margin">
                  <small type="button" class="card-link text-justify"> {{ item.note.substring(0,100) }} ... </small>
                </article>
                <p><small class="note-margin"> {{ item.dateAdded | date:'dd/MM/yyyy HH:mm' }}</small></p>
              </div>
            </cdk-drop>
          </div>
        </div>

        <div class="col-sm-3" borderColor="border-warning">
          <div class="card bg-warning">
            <div class="card-header">
              <mdb-card-text class="text-white text-center">W trakcie
                <span [ngSwitch]="mainList.progress.length >0">
                  <span *ngSwitchCase="true">
                    <span class="badge badge-light badge-pill mx-2"> {{mainList.progress.length}}</span>
                  </span>
                  <span *ngSwitchCase="false">
                    <span><i class="far fa-clock mx-2"></i></span>
                  </span>
                </span>
              </mdb-card-text>
            </div>
            <cdk-drop id="progress" class="listme list-group card-margin" #progressList [data]="mainList.progress"
              [connectedTo]="[todoList, doneList, cancelledList, deleteList]" (dropped)="drop($event)">
              <div class="list-group-item list-group-item-warning" *ngIf="mainList.progress.length < 1">
                <p class="grey-text text-center">pusto</p>
              </div>
              <div class="list-group-item-action list-group-item-warning"
                *ngFor="let item of mainList.progress; let i = index ">
                <h6 class=" note note-warning" cdkDrag>{{ item.title.substring(0,20) | titlecase }}</h6>
                <article (click)="changeModal(item)" data-toggle="modal" data-target="#openModal" class="note-margin">
                  <small type="button" class="card-link text-justify"> {{ item.note.substring(0,100) }} ... </small>
                </article>
                <p><small class="note-margin"> {{ item.dateAdded | date:'dd/MM/yyyy HH:mm' }}</small></p>
              </div>
            </cdk-drop>
          </div>
        </div>

        <div class="col-sm-3" borderColor="border-success">
          <div class="card teal accent-4">
            <div class="card-header">
              <mdb-card-text class="text-white text-center">Zrobione
                <span [ngSwitch]="mainList.done.length >0">
                  <span *ngSwitchCase="true">
                    <span class="badge badge-light badge-pill mx-2"> {{mainList.done.length}}</span>
                  </span>
                  <span *ngSwitchCase="false">
                    <span><i class="far fa-check-circle mx-2"></i></span>
                  </span>
                </span>
              </mdb-card-text>
            </div>
            <cdk-drop id="done" class="listme list-group card-margin" #doneList [data]="mainList.done"
              [connectedTo]="[todoList, progressList, cancelledList, deleteList]" (dropped)="drop($event)">
              <div class="list-group-item list-group-item green accent-1" *ngIf="mainList.done.length < 1">
                <p class="grey-text text-center">pusto</p>
              </div>
              <div class="list-group-item-action list-group-item-success"
                *ngFor="let item of mainList.done; let i = index ">
                <h6 class=" note note-success" cdkDrag>{{ item.title.substring(0,20) | titlecase }}</h6>
                <article (click)="changeModal(item)" data-toggle="modal" data-target="#openModal" class="note-margin">
                  <small type="button" class="card-link text-justify"> {{ item.note.substring(0,100) }} ... </small>
                </article>
                <p><small class="note-margin"> {{ item.dateAdded | date:'dd/MM/yyyy HH:mm' }}</small></p>
              </div>
            </cdk-drop>
          </div>
        </div>

        <div class="col-sm-3" borderColor="border-light">
          <div class="card bg-light">
            <div class="card-header">
              <mdb-card-text class="dark-grey-text text-center">Anulowane
                <span [ngSwitch]="mainList.cancelled.length >0">
                  <span *ngSwitchCase="true">
                    <span class="badge badge-light badge-pill mx-2"> {{mainList.cancelled.length}}</span>
                  </span>
                  <span *ngSwitchCase="false">
                    <span><i class="fas fa-minus-circle mx-2"></i></span>
                  </span>
                </span>
              </mdb-card-text>
            </div>
            <cdk-drop id="cancelled" class="listme list-group card-margin" #cancelledList [data]="mainList.cancelled"
              [connectedTo]="[todoList, progressList, doneList, deleteList]" (dropped)="drop($event)">
              <div class="list-group-item list-group-item-light" *ngIf="mainList.cancelled.length < 1">
                <p class="grey-text text-center">pusto</p>
              </div>
              <div class="list-group-item-action list-group-item-light"
                *ngFor="let item of mainList.cancelled; let i = index ">
                <h6 class=" note note-light" cdkDrag>{{ item.title.substring(0,20) | titlecase }}</h6>
                <article (click)="changeModal(item)" data-toggle="modal" data-target="#openModal" class="note-margin">
                  <small type="button" class="card-link text-justify"> {{ item.note.substring(0,100) }} ... </small>
                </article>
                <p><small class="note-margin"> {{ item.dateAdded | date:'dd/MM/yyyy HH:mm' }}</small></p>
              </div>
            </cdk-drop>
          </div>
        </div>
      </div>

      <div class="container p-2"></div>
      <div class="row">
        <div class="col">

          <div class="card bg red darken-3">
            <div class="card-header">
              <mdb-card-text class="text-white text-center">Usunięte
                <span [ngSwitch]="mainList.delete.length >0">
                  <span *ngSwitchCase="true">
                    <span class="badge badge-light badge-pill mx-2"> {{mainList.delete.length}}</span>
                  </span>
                  <span *ngSwitchCase="false">
                    <span><i class="fas fa-times-circle mx-2"></i></span>
                  </span>
                </span>
              </mdb-card-text>
            </div>
            <cdk-drop id="delete" class="listme list-group card-margin" #deleteList [data]="mainList.delete"
              [connectedTo]="[todoList, progressList, doneList, canceledList]" (dropped)="drop($event)">
              <div class="list-group-item list-group-item-light" *ngIf="mainList.delete.length < 1">
                <p class="grey-text text-center">pusto</p>
              </div>
              <div class="list-group-item-action list-group-item-danger"
                *ngFor="let item of mainList.delete; let i = index ">
                <h6 class=" note note-danger" cdkDrag>{{ item.title.substring(0,50) | titlecase }}</h6>
                <article (click)="changeModal(item)" data-toggle="modal" data-target="#openModal" class="note-margin">
                  <small type="button" class="card-link text-justify"> {{ item.note.substring(0,100) }} ... </small>
                </article>
                <p><small class="note-margin"> {{ item.dateAdded | date:'dd/MM/yyyy HH:mm' }}</small></p>
              </div>
            </cdk-drop>
            <button (click)="clearList()" class="btn btn-red darken-3 btn-sm btn-block btn-red darken-3">
              Wyczyść<mdb-icon fas icon="trash-alt" class="ml-1"></mdb-icon>
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="openModal" tabindex="5" role="dialog" aria-labelledby="exampleModalScrollableTitle"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">

          <div *ngIf="!editState" class="modal-header">
            <h6 class="blockquote bq-primary" id="exampleModalScrollableTitle">{{currentTask.title | titlecase}}
            </h6>
          </div>
          <div *ngIf="!editState" class="modal-body">
            <small class="text-muted">Data utworzenia: {{currentTask.dateAdded | date:'dd/MM/yyyy HH:mm'}}</small>
          </div>
          <div class="modal-body">
            <div *ngIf="!editState">
              <span class="h6 text-muted">Notatki:</span>
              <p class="text-justify text-muted">{{currentTask.note}}</p>
            </div>

            <!---   Edit modal -->
            <div *ngIf="editState">
              <form (ngSubmit)="updateItem(currentTask)">
                <div class="col-12 text-center">
                  <small class="text-warning">Edycja zadania</small>
                </div>
                <div class="col-12 text-left">
                  <div class="md-form">
                    <h6 class="blockquote bq-warning">Nowy tytuł:</h6>
                    <input type="text" class="md-textarea form-control uk-text-left-small" mdbInput
                      [(ngModel)]="currentTask.title" name="task">
                  </div>
                  <div class="md-form">
                    <h6 class=" blockquote bq-warning">Nowa notatka:</h6>
                    <textarea class="md-textarea form-control uk-text-left-small" rows="4" type="text" length="160"
                      mdbCharCounter mdbInput [(ngModel)]="currentTask.note" name="note"></textarea>
                  </div>
                </div>
                <div class="col-12 text-center">
                  <button type="button" class="btn btn-outline-success btn-sm mr-2" data-dismiss="modal"
                    title="Ok, zamknij"><i class="fas fa-check-circle mx-2"></i>
                  </button>
                </div>
              </form>
            </div>
            <!---   Edit modal end -->
          </div>
          <div class="modal-footer">
            <!------  update task ----->

            <div *ngIf="!editState">
              <span class="visible">
                <button (click)="editTask($event, item)" class="btn btn-outline-warning waves-effect btn-sm"
                  title="Edytuj">
                  <i class="fas fa-edit"></i></button>

                <!------  update ends ----->

                <button class="btn btn-outline-danger btn-sm" title="Usuń">
                  <mdb-icon far icon="trash-alt"></mdb-icon>
                </button>
                <button type="button" class="btn btn-outline-info btn-sm" data-dismiss="modal">
                  <i class="fas fa-check-circle mx-2"></i>
                </button>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal ends -->
  </div>