CDK Drag Drop issues with nested lists
- Langage dominant
- TypeScript
- Étoiles
- 25k
- Forks
- 6.8k
- Merge moyen
- 1 j 8 h
- PR mergées (30 j)
- 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.
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par les reproductions StackBlitz liées afin de confirmer le comportement des listes imbriquées. Lisez src/cdk/drag-drop/directives/drop-list.ts, en particulier la configuration des listes connectées décrite dans l’issue, et repérez les tests pertinents de glisser-déposer. C’est terminé lorsque les éléments des listes internes peuvent être déposés dans leur propre liste, dans des listes sœurs et dans des listes connectées externes, y compris la liste source.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- angular, typescript
- Domaine
- frontend
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100