角度材质嵌套拖放 [英] 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/组-项目-移动

似乎在 Both together 示例中，单个项目的拖动按预期工作，但组的重新排序不起作用，但是 cdkDropListGroup在 cdk-drag-drop-connected-sorting-group-example.html 的第 4 行，当移动到父 之外时会导致相反的结果发生这种情况时，组现在可以重新排序，但项目不能在组之间移动.

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屋！