Angular Material Nested Drag and Drop

可紊 提交于 2020-02-01 03:19:07

问题


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.

Moving items between groups: https://stackblitz.com/edit/items-move

Reordering groups: https://stackblitz.com/edit/groups-move

Both together: https://stackblitz.com/edit/groups-items-move

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?


回答1:


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

Both together: https://stackblitz.com/edit/nested-connected-lists



来源:https://stackoverflow.com/questions/54075606/angular-material-nested-drag-and-drop

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!