Question

我将此drag & drop demo与一些外部可拖动元素组合在一起。正如您在Stackblitz example中看到的那样，这些外部可拖动元素无法放入主要放置区，甚至不能放在里面作为孩子。我是Angular的新手，并尝试了几次以失败告终的步骤。首先，我认为我的可拖动元素需要在数组“ allDropListsIds”中注册...

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

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

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

问候，Dom

Answer 1

在Angle网站：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);
}

带有外部拖动元素的angular-cdk嵌套拖放演示

1 个答案: