CDK Drag and Drop: Nested Drag and Drop does not allow sorting on same level

[mmuehlich]

Reproduction

StackBlitz: https://stackblitz.com/edit/angular-wfrzq9

Steps to reproduce:

1. Switch 'child a' and 'child b'
2. Directly switching a and b will fail

• Workaraound in the example: Drag child b after Parent_2 and drag it again into the list before child a

Expected Behavior

Dragging within the inner cdkDropList should work, the outher cdkDropList should only fire if the element is moved out of its list.

Actual Behavior

The inner cdkDropList does listen to the drag - the outer list is called.

might be caused by
components/src/cdk/drag-drop/directives/drop-list.ts 304:
ref.connectedTo(siblings.filter(drop => drop && drop !== this).map(list => list._dropListRef))

Environment

• Angular: 9.0.0
• CDK/Material: 9.0.0
• Browser(s): Chrome 80.0.3987.87
• Operating System (e.g. Windows, macOS, Ubuntu): Win 10

[crisbeto]

I spent a bit of time on this, but it looks like it'll be tricky if we want to cover all the cases. I have a solution that somewhat works here, but there are definitely edge cases that it won't cover.

[stefanomiccoli]

any news on this? got the very same problem and still struggling to find a decent workaround

EDIT: ok there seem to be several issues opened on this topic for sometime, actually most of the issues related to drag & drop. I wonder if it will ever get addressed by the team... Anyway, the workaround suggested by the user sheese in #16671 seems to work in my case too. So

1. create list of connectedTo in reverse order, from top nested to root. In my case something lik ["rules.2.rules.1.rules", "rules.2.rules", "rules.1.rules.1.rules.1.rules", "rules.1.rules.1.rules", "rules.1.rules", "rules.0.rules.1.rules", "rules.0.rules", "rules"]
2. reset such list on cdkDragEntered and cdkDragStarted events on elements marked as cdkDrag as shown in https://stackblitz.com/edit/angular-drag-and-drop-child-groups-35em6n?file=app%2Fcdk-drag-drop-connected-sorting-group-example.html (again credits and kudos to Sheese)

Additional suggestion to those that may reach this page
In my case I had a RuleSetComponent (FormGroup) that initiated a RulesComponent (FormArray of FormGroups) with dynamically nested RulesComponents. So, in case of nested lists through nested components you may find helpful to store such list of cdkDropList in a service instantiated by the root RuleSetComponent

[mmuehlich]

@stefanomiccoli - thanks for the update!

I ended up changing my DOM structure and avoiding any nested Drag and Drop. I needed Drag and Drop in and between trees, but finally used flat lists of DIVs instead (+several Divs outside the actual tree). CSS and JS make it look like an actual tree but in fact, it is just a flat list.

[james-logan]

+1

[crisbeto]

Duplicate of #16671.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}