§10-01Layout
Dashboard widget grid (drag-resize)
ウィジェットをドラッグで並べ替え、大きさを変える。
利用者が自分の関心に合わせて画面を組み替えられる。見たい指標が人や役割で異なるダッシュボードや管理画面に向く。
実装のポイント
配置はウィジェット ID と x・y・幅・高さの配列でデータ化して保存し、ドラッグ中はプレースホルダを出して衝突を解決する。キーボードでの移動手段も用意する。
- 特徴
- 状態管理
- デモで使っているもの
- lucide-react
- Pointer Events