angular / angular/components

CDK Drag Drop issues with nested lists

Open
#16,671 62 comments 95 reactions 0 assignees View on GitHub
area: cdk/drag-drop P2
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

https://stackblitz.com/edit/angular-drag-and-drop-child-groups-fxzjja?file=app%2Fcdk-drag-drop-connected-sorting-group-example.html

Steps to reproduce:
1. Try to drag element "Brush teeth" to before "Drive to office" or before "Walk dog"
2. this will not be possible


#### Expected Behavior

Drag / Drop to all lists contained in cdkDropListConnectedTo

#### Actual Behavior

Items from inner Lists may only be dropped to outer lists, not to sibling or their own lists

#### Environment

- Angular: 8.1.2
- CDK/Material: 8.1.2
- Browser(s): Firefox / Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Debian Linux, Windows

#### Additional Info
When using CDK drag / drop (8.0.0 up to and including 8.1.2) with nested
lists, two issues arise that prevent an easy use of the feature:

a) dragging does not work from inner list to inner list

- See
https://stackblitz.com/edit/angular-drag-and-drop-child-groups-fxzjja?file=app%2Fcdk-drag-drop-connected-sorting-group-example.html

- When dragging an inner item (e.g. Brush teeth) it is only possible to
drop it in the outer list, not in its own list and not in its sibling list.

- It turns out, that order in cdkDropListConnectedTo is important: when
I reverse the items, it will partially work: See
https://stackblitz.com/edit/angular-drag-and-drop-child-groups-mxrkae?file=app%2Fcdk-drag-drop-connected-sorting-group-example.html

- Still, it is not possible to drop an item from an inner list in into
its own list

b) dragging does not work in the drop item's source list

- See above

- You may find a hack for this in
https://stackblitz.com/edit/angular-drag-and-drop-child-groups-35em6n?file=app/cdk-drag-drop-connected-sorting-group-example.html

Explanation and proposed solution.

For above case a) mentioning it in the documentation may be sufficient -
it can be influenced from the outside. However, a more intelligent
solution (e.g. identifying the toplevel sublist) would be nice.

For case b), filtering out the source list in
src/cdk/drag-drop/directives/drop-list.ts seems to cause the issue:
ref.connectedTo(siblings.filter(drop => drop && drop !==
this).map(list => list._dropListRef))
My hack replaces this by an unfiltered list - in quite an ugly manner.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproductions to confirm the nested-list behavior. Read src/cdk/drag-drop/directives/drop-list.ts, especially the connected-list setup described in the issue, and locate relevant drag-drop tests. Done means items from inner lists can be dropped into their own, sibling, and outer connected lists, including the source list.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.