角材料嵌套拖放 [英] 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屋!