angular / angular/components

CDKDragAndDrop: Collapse cdkDropList item contents on cdkDragStarted event

Aperta
#18,179 4 commenti 8 reazioni 0 assegnatari Vedi su GitHub
area: cdk/drag-drop P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

### (Marked as troubleshooting since I wasn't sure if there was a known solution for this case)
#### What are you trying to do?

Collapse/hide the contents of all items in a cdkDropList upon starting a drag event, leaving a condensed view of labels that is easier to sort.

#### What troubleshooting steps have you tried?

When starting the drag event, all items collapse except for the item currently being dragged, causing issues in the list placeholder when attempting to drop an item. Once the drop event is complete, the dropped item collapses and the list returns to normal.

#### Reproduction

StackBlitz: https://stackblitz.com/edit/components-issue-bt4kvt?file=app%2Fapp.component.ts

Steps to reproduce:
1. Set up a cdkDropList with items that contain a title and collapsible content panel.
2. Set the cdkDragStarted event for the list items to collapse all of the content panels.
3. Make sure all items in the list are expanded.
4. Begin dragging one of the items.

#### Environment

- Angular: 8.2.0
- CDK/Material: 8.2.3
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione StackBlitz collegata e riproduci il comportamento relativo all’evento cdkDragStarted su una cdkDropList. Esamina come vengono dimensionati l’elemento trascinato e il segnaposto dell’elenco mentre il contenuto degli altri elementi si comprime. Il lavoro è completato quando il trascinamento con il contenuto degli elementi compresso non causa più problemi al segnaposto e l’elenco torna al suo stato normale dopo il rilascio.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
42/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.