2024年1月11日

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

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

dnd-kit

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

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

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

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

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

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