はじめに

現状、react-dndでドラッグアンドドロップを実現しているReactのアプリケーションのドラッグアンドドロップライブラリを変えようとしています。
その乗り換え先としては、いまReactのドラッグアンドドロップライブラリで一番勢いのありそうなdnd-kitを検討しています。

ここでは、react-dndで書かれているコードをdnd kitに変更するにはどうするのかというのを調べてみました。

react-dndの不満点

そもそもreact-dndをなぜ乗り換えたいのかということなのですが、react-dndだとスマートフォン対応が面倒というのがあります。
react-dndはHTML5のドラッグアンドドロップ APIを使用して実装しているため、スマートフォンでは別の専用のバックエンドを指定する必要があります。
https://react-dnd.github.io/react-dnd/about#touch-support

そのため、デバイスタイプを見て、スマートフォンならTouchBackendを使用し、PCならばHTML5Backendを使用する必要があります。
できればこのようなデバイスタイプを見て処理を切り替えるようなコードは採用したくないです。

対象のコード

対象となるコードは以下のようなコードで、ドラッグアンドドロップによくありがちなリストをドラッグアンドドロップで並び替えるようなものとはちょっとだけ違います。
オレンジ色のタイルをドラッグアンドドロップで移動するようなコードです。

dnd-kit

乗り換えの候補として選んだのがdnd-kitです。
https://docs.dndkit.com/

後発のドラッグアンドドロップライブラリで、最近は日本語の記事も増えてきています。
参考:
https://zenn.dev/castingone_dev/articles/dndkit20231031
https://zenn.dev/hamo/articles/725e4189bfc54d
https://smootech.net/s8envpsfod/

dnd-kitで書き換えたコード

react-dndと同じようなhooksを使ったAPIなので比較的簡単に書き換えることが可能でした。

drag中、移動もとのタイルを半透過で残すため、DragOverlayを追加
drop終了時のアクションをDndContextへ移動

スマートフォンだと問題なくドラッグアンドドロップが動作するのですが、使用しているChakra-UIの影響なのか、PCのタッチパネルだと正常に動作しないです。

おわりに

react-dndのコードをdnd-kitを使って書き換えてみたのですが、使用感としてはほぼ同じでした。
dnd-kitはSortable interfaceが用意されており、これを利用できるならばそれなりに簡単に書けそうです。
これを使えない場合は、どうしても書かなくてはいけないコードが多くなってしまうようです。
そのため、リストをドラッグアンドドロップで並び替えるような用途にdnd-kitは向いていて、それ以外では採用するメリットはなさそうです。