【dnd kit】ドラッグ時に隠れてしまう問題

こんにちは、フリーランスエンジニアの太田雅昭です。

dnd-kit

dnd-kitは、Reactでドラッグ&ドロップを簡単に実装できるようになるライブラリです。

ドラッグ要素が隠れてしまう問題

ドラッグした対象が、コンテナ外まで持っていこうとすると隠れてしまう問題があります。

Can’t drag outside of the container · Issue #1098 · clauderic/dnd-kit

Hi, First of all, thank you for the library, it works great! I’m having an issue when I want to drag an item out of a scrollable list (vertical). If I set the list with overflow-x: hidden, I can’t …

上記URLによると、overflow:hiddenを指定したコンテナ内で使用すると、はみでた部分が消える現象が出るとのこと。その場合、別途Overlayを書かないといけないようです。

Overlayを書くのも面倒だったので、コンテナのoverflow:hiddenを無効にすれば、意図した動作になりました。

解決に至るまで、z-indexを最大にしたり色々試していたのですが、こんな簡単に治ってしまうとは。

小話

このWordpressは2024/01/11現在、GCPの無料範囲内で運用しています。結構頻繁に落ちていて、その度にコンソールから再起動してDockerも再起動ということを行なっているのですが、なかなか大変です。ゆくゆくは有料サーバーを使って、色々試すまでやりたいと思ってます。