§10-02Layout
Kanban board
列ごとにカードを並べ、ドラッグで状態を動かす。
作業の進み具合を列の位置で見せる。タスクが決まった段階を経て進む案件や採用、開発の管理に向く。
実装のポイント
カードの移動は列 ID と並び順を持つデータ更新として扱い、サーバー反映は楽観更新にする。HTML5 DnD はタッチで動かないため、ポインターイベントかキーボード代替が必要。
- 特徴
- ジェスチャー
- 状態管理
- デモで使っているもの
- lucide-react
- Pointer Events
§10-02Layout
列ごとにカードを並べ、ドラッグで状態を動かす。
作業の進み具合を列の位置で見せる。タスクが決まった段階を経て進む案件や採用、開発の管理に向く。
カードの移動は列 ID と並び順を持つデータ更新として扱い、サーバー反映は楽観更新にする。HTML5 DnD はタッチで動かないため、ポインターイベントかキーボード代替が必要。