DnD で順番や階層を変えられる木構造 Todo の作り方 | 株式会社ヌーラボ(Nulab inc.)

Backlog 開発チームの saki です。最近、Web フロントエンドの技術を使い、タスクの順番や階層をドラッグアンドドロップ(DnD)で変えられる、木構造 Todo の習作をしました。後学のために作り方の主要な部分を紹介します。また、DnD 周りではまった問題と解消法を共有します。 作った Todo は以下 gif のようなものです。基本的な Todo 機能(タスクの追加、完了、削除)に加えて、DnD で順番や階層を変えられたり、タスクの開閉状態を切り替えて子タスクを表示非表示できます。DnD でタスクを意図した位置に移動できるよう、タスクや階層の間にはスペーサーを設けています。 記事内のコードには TypeScript 4.6、UI ライブラリには Preact 10 系を用います。前提として、コードは実装を一部省略して記載します。そのままでは動かないため注意してください。動作する