こんにちは！アプリケーションサービス部ディベロップメントサービス 1 課の滝澤です。
本記事をご覧いただき、ありがとうございます。
本記事では、vue.draggable.next を使用している際、ドラッグ時にスクロールと判定される領域を拡張する方法をご紹介します。
はじめに
本記事では、vue.draggable.next についてある程度の知識があることを前提に進めます。
もし vue.draggable.next についての概要が知りたい場合は、以下の記事をご参照ください。
やりたいこと
以下に記載しますが、デフォルトの状態でスクロールと判定される領域はかなり狭いです。
デフォルトのスクロールと判定される領域
スクロールと判定される領域を拡張したい
今回目指すのは、以下のようなドラッグ時にスクロールと判定される領域を拡張することです。
[結論] vue.draggable.next を使用している際、ドラッグ時にスクロールと判定される領域を拡張する方法
vue.draggable.next を使用している際、ドラッグ時にスクロールと判定される領域を拡張する方法は、以下の通りです。
- forceFallback を true に設定して、scroll-sensitivity に任意の値を設定する
<draggable ... :forceFallback="true" :scroll-sensitivity="100"> ... </draggable>
それぞれのプロパティの説明
forceFallback によって HTML のネイティブなスクロールを無効にする
※ vue.draggable.next は、Sortable.js をベースに作成されているため Sortable.js のオプションをそのまま使用できます。
forceFallback は、HTML のネイティブなスクロールを無効にするオプションです。
参考：https://github.com/SortableJS/Sortable?tab=readme-ov-file#options
scroll-sensitivity によってスクロールと判定される領域（高さ）を設定する
scroll-sensitivity は、スクロールと判定される領域（高さ）を設定するオプションです。（px 単位）
参考：https://github.com/SortableJS/Sortable/tree/master/plugins/AutoScroll#scrollsensitivity-option
はまりポイント
2 つ以上の draggable を使用している場合
2 つ以上の draggable を使用している場合、一方の draggable に forceFallback を true に設定すると、他方の draggable からのドラッグができなくなります。
その際はドラッグ元の draggable にも forceFallback を true に設定する必要があります。
また、他の draggable からドラッグした時にもスクロールと判定される領域を拡張させたい場合は、ドラッグ元の draggable にも scroll-sensitivity を設定する必要があるので注意が必要です。
forceFallback を true にすると、文字列が選択されてしまう。
発生環境
- chrome version：127.0.6533.120
- vue.draggable.next version：4.1.0
暫定的な対処として、以下のように draggable に CSS を記述することで文字列の選択を無効にすることができます。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/user-select
<draggable ... style="user-select: none" :forceFallback="true" :scroll-sensitivity="100" > ... </draggable>
まとめ
vue.draggable.next を使用している際、ドラッグ時にスクロールと判定される領域を拡張する方法についてご紹介しました。 この記事が、誰かのお役に立てれば幸いです。
