Step 4 - drag and drop
1 min czytania
Add cards to the board. Each column is a CdkDropList connected to all other columns (cdkDropListConnectedTo), each card a CdkDrag. On drop - both same-column reorder and cross-column move - update columnId if needed, then reindex order 0..n for every affected column and persist with the single-batch persistOrder from the service. CRITICAL gotcha for later: the drop handler must map the RENDERED index back onto the FULL task array of the column, because filters added later will hide cards and cdk indices will refer to the filtered list; write it defensively now.
Card creation: an "Add card" button at the bottom of each column creates a card and opens it directly in inline edit mode (a textarea on the card face, autofocused; Enter or blur commits, Escape cancels and removes an empty new card). Existing cards can be renamed inline the same way via a small edit affordance. Card face shows for now: the first line of the markdown as the title and a left color stripe when color is set. Keep drag smooth: use trackBy, no layout jank while dragging, and a visible drop placeholder.
Dyskusja
Komentarze: 0Brak komentarzy. Rozpocznij dyskusję.