角度材质嵌套拖放

Posted 2023-05-08

【中文标题】角度材质嵌套拖放

【英文标题】：Angular Material Nested Drag and Drop

【发布时间】：2019-06-02 04:33:18

【问题描述】：

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

我已经设法分别创建了实现单独拖放的单独示例，尽管当将它们组合在一起时，我似乎无法同时实现这两个功能。

在组之间移动项目：https://stackblitz.com/edit/items-move

重新排序组：https://stackblitz.com/edit/groups-move

两者一起：https://stackblitz.com/edit/groups-items-move

似乎在 Both together 示例中，单个项目的拖动按预期工作，但组的重新排序不起作用，但是 @ 的第 4 行的 cdkDropListGroup 987654326@ 当移出父级 <cdk-drop-list> 时会导致相反的情况发生，组现在可以重新排序，但项目不能在组之间移动。

任何关于我哪里出错的指针？

【问题讨论】：

相关问题：github.com/angular/components/issues/16671

【参考方案1】：

看起来 cdkDropListGroup 不适用于嵌套列表。 只需将 id 添加到列表中并使用 [cdkDropListConnectedTo] 将它们连接在一起。

两者一起：https://stackblitz.com/edit/nested-connected-lists

【讨论】：

你知道为什么需要id吗？

非常感谢！一个小补充：最好将 cdkDropListOrientation="horizo​​ntal" 添加到外部 cdkDropList 以摆脱组的上下移动。

关于如何使它适用于嵌套组的任何想法，即我们应该能够在组中插入一个组。 ?

我能够使用解决方案 stackblitz.com/edit/… 实现相同的效果，但无法使重新排序和嵌套都正常工作，我必须提供一个单独的支架来拖动到组和更改顺序。

@Stalli ..你知道吗？