angular / angular/components

CDK Drag Drop issues with nested lists

Ouverte
#16,671 62 commentaires 95 réactions 0 personnes assignées Voir sur GitHub
area: cdk/drag-drop P2
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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.