Реестр перетаскивания материалов не выполняется

Question

При перетаскивании из одного списка в другой событие часто не активируется. Также часто он не распознает другой контейнер как зону сброса.

Я пытался поместить перетаскивание на разные элементы, изменив стиль CSS для лучшего обнаружения. изменение общей структуры HTML.

Я не мог заставить его работать на stackblitz, но вот это все равно, чтобы посмотреть на код. https://stackblitz.com/edit/angular-glkn4v

общий HTML для списков перетаскивания

<div class="grouper" cdkDropList cdkDropListGroup id="list-one" [cdkDropListConnectedTo]="['list-two']" [cdkDropListData]="dataMap"
               (cdkDropListDropped)="drop($event)" >
            <div *ngFor="let node of getMapKeys(); let i = index">
              <div class="main" cdkDropList>
                <div class="headnode">> {{node}}</div>
                <div class="subnode" *ngFor="let item of getmapkeyValues(node)" cdkDrag> <!--style="display: none;"-->
                  {{item}}
                </div>
              </div>
            </div>
          </div>

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

Я очень новичок во всем этом, так что извините, если весь мой код плохой.