作ったもの
Kanban Local — https://sen.ltd/portfolio/kanban-local/
- 複数ボードに複数カラム、カード
- HTML5 ドラッグ & ドロップ（カラム間移動、カラム内並び替え、カラム並び替え）
- localStorage 永続化
- JSON インポート / エクスポート
- カード検索
- カラーラベル
vanilla JS、ゼロ依存、ビルド不要。node --test で 46 ケース。
イミュータブルなボード状態
12 個の変更関数すべてが新しいオブジェクトを返す。board → columns → cards のツリー全体を純関数的に再構築。
同一カラム内移動のオフバイワン
カードを削除してから挿入する場合、移動元より後ろに移動するときは toIndex -= 1 が必要:
if (fromColId === toColId && toIndex > fromIndex) toIndex -= 1;
これを忘れると「0 → 2」のつもりが「0 → 1」になる。
HTML5 ドラッグイベントの罠
-
dragoverではpreventDefault()必須。これを忘れるとdropが発火しない -
dragleaveはカラムの子要素を跨ぐたびに発火する。ドロップ対象のハイライト制御にはe.relatedTargetや enter/leave カウンタが必要 -
dragendはキャンセル時も発火するのでクリーンアップはここで
シリーズ
100+ 公開ポートフォリオ シリーズの #57 です。