角材料嵌套拖放 [英] Angular Material Nested Drag and Drop

问题描述

尽管我遇到了一些问题，我正在尝试实现一个可重排序的列表组，其中包含可以使用@ angular/cdk/drag-drop在列表之间移动的元素.

I'm trying to achieve a reorder-able group of list which contain elements that can be moved between lists, using @angular/cdk/drag-drop, although I'm running into a few problems.

我设法分别创建了实现单个拖放的单个示例，尽管将它们放在一起似乎无法并行实现这两个功能.

I've managed to separately create individual examples which achieve the individual drag and drop, although when brought together it seems I cannot achieve both pieces of functionality in parallel.

在组之间移动项目: https://stackblitz.com/edit/项目移动

重新排序组: https://stackblitz.com/edit/groups-移动

同时使用: https://stackblitz.com/edit/groups-items-move

在两者示例中，似乎可以按预期拖动单个项目，但是组的重新排序不起作用，但是，cdk-drag-drop-connected-sorting-group-example.html当移到父级<cdk-drop-list>之外时，会导致相反的情况发生，现在可以对组进行重新排序，但不能在组之间移动项目.

It seems in the Both together example, the dragging of individual items works as expected, but the re-ordering of the groups does not work, however, the cdkDropListGroup on line 4 of cdk-drag-drop-connected-sorting-group-example.html when moved outside the parent <cdk-drop-list> then causes the opposite to occur, the groups are now able to be reordered, but the items are then not able to be moved between groups.

关于我要去哪里的任何指针吗?

Any pointer as to where i'm going wrong?

推荐答案

看来cdkDropListGroup不适用于嵌套列表. 只需将ID添加到列表中，然后将其与[cdkDropListConnectedTo]连接起来即可.

It looks like cdkDropListGroup doesn't work for nested lists. Just add the id to the lists and connect them together with [cdkDropListConnectedTo].

在一起: https://stackblitz.com/edit/嵌套连接列表

这篇关于角材料嵌套拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！