I'm composing a form designer using Angular Material drag and drop. My problem is that after enabling drag-drop functionality, the sorting of items without nested drag-drops stops working.
I want to make a list of components which can exist at the root level and also be grouped under sections. I trying to make the elements
- Be dragged for sorting purposes within a group and root level
- Be dragged between groups
- Be dragged between root level and the various groups.
- and the groups to be sorted via drag
I've achieved this by connecting the groups via cdkDropListConnectedTo, connecting items between the root level and groups. The problem is that that the sorting of elements within groups no longer works once I've enabled the root level list to interact with the sub-groups (although the root level sorts just fine).
I've made an example of the problem via Stackblitz. Taking out the root's ID gets the sorting working, but I can't drag items from a group back into the root list.
<div
[id]="rootDragDropName" <-- taking this line out fixes the sorting but I can't drag items back into this area
cdkDropList
[cdkDropListData]="formFields"
(cdkDropListDropped)="dropItem($event)"
[cdkDropListConnectedTo]="getConnectedList()"
>
Where am I going wrong with this? I've seen other examples where nested drag-drops are changed dynamically at runtime but to my eyes, I shouldn't need to go that far and the current markup (similar to this example) should achieve the result I'm looking for.
