導入

overflow:scrollを付与して、スクロールバーを追加したときに、
ドラッグした要素が、要素の下に隠れてしまいました。

上記事象がなかなか解決できなかったので、解決策をまとめます。

使用技術は、

dndkit
react

です。

結論

結論は、「DragOverRay」を使用することです。

DragOverRayは、dndkitに標準で用意されているコンポーネントです。

上記を使用することで、
overflowされたコンポーネントの中で、ドラッグしたとき要素の下に隠れてしまう現象を回避できます。

DragOverRay

DragOverRayについては下記の公式リファレンスにまとめらています。
https://docs.dndkit.com/api-documentation/draggable/drag-overlay

下記引用です。しっかりスクロールがついてる場合は、使用を推薦すると書いてますね。

If your draggable item is within a scrollable container, we also recommend you use a , otherwise you'll need to set the draggable element to position: fixed yourself so the item isn't restricted to the overflow and stacking context of its scroll container, and can move without being affected by the scroll position of its container.

overflow時には、親要素を飛び越えてドラッグすると、別要素の下に隠れてしまうのは仕様のようですね。。

全くそのことに気が付かず、解決にかなりの時間を使ってしまいました。

まとめ

dndkitのようなライブラリを使う場合、詰まったらまず公式リファレンスを読むことですね。。

ツールを使用する中で、うまくいかないことは、
まずツールのオプションとかでサポートしてくれてたりします。

dndkitは、英語のまとめ記事はあるのですが、
日本語の記事はなかなかないので、そこもまた難しいとこです。

今回の記事が少しでも誰かの役に立てば幸いです。