【dnd-kit】ドラッグ中のホイールスクロールができない問題

dnd-kit を使ってドラッグ＆ドロップを実装した際、ドラッグ中にマウスのホイールスクロールできなくなった

DragOverlay を使ってプレビュー表示していることが原因と分かったので、解決方法を整理しておく

現象

• ドラッグ中、スクロール可能なコンテナやページ全体のホイール操作が効かなくなる
• autoScroll を無効にしても改善しない

原因は、DragOverlay が描画される際に、その要素がマウスイベントをブロックしていることにある

解決策

DragOverlay とその子要素に対して、pointer-events: none を指定する

実装例

<DragOverlay style={{ pointerEvents: "none" }}>
  <DragPreviewContent />
</DragOverlay>

そして、DragPreviewContentに対してもstyle={{ pointerEvents: "none" }}を設定する

これにより、ドラッグ中でも背後のスクロール可能な要素にマウス操作が届くようになった

なぜ pointer-events が効くのか

DragOverlay は画面の最前面に配置されるため、通常はホイールやクリックなどのイベントがこの要素で止まってしまう

pointer-events: none を指定することで、その要素がすべてのポインタイベントを無視するようになり、背後の要素に操作が伝わるようになった