实质性拖放注册表失败

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>

我希望该项目在拖放到拖放区上时正确注册。它也应该可拖放到树状结构的每个部分上。

在这一切上我都是新手，如果我的代码不好，对不起。