带有外部拖动元素的 angular-cdk-nested-drag-drop-demo

Question

我将这个drag & drop demo 与一些外部可拖动元素结合在一起。正如您在Stackblitz example 中看到的那样，这些外部可拖动元素不能被拖放到主要拖放区中，甚至不能作为子级拖放到里面。我是 Angular 的新手，尝试了几个没有结果的步骤。首先，我认为我的可拖动元素需要在数组“allDropListsIds”中注册...

编辑：“onDragDrop”功能甚至没有被触发，因此我认为放置的元素没有注册，因为作为孩子的放置没有绿色的 Dropcolor。您可以尝试拖动一些现有元素。

也可能是模板的问题，因为[connectedDropListsIds]，[cdkDropListConnectedTo]可能用错了。

如果有人能给我一些提示，那就太好了。

问候，多姆

Answer 1

在 angular 网站：angula official docs 中有一个示例，说明如何使用 angular/cdk 组件制作您想要的功能。

您需要在您的 TS 文件中导入：

import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';

然后使用你的组件触发的事件'drop'到你自己的方法中并执行如下操作：

drop(event: CdkDragDrop<string[]>) {
      transferArrayItem(event.previousContainer.data,
                        event.container.data,
                        event.previousIndex,
                        event.currentIndex);
}