【jQuery】ドラッグ操作をトリガーとして検知する方法

jQueryには、さまざまな種類のトリガーが用意されていますが、ドラッグ操作(マウスをクリックした状態でマウスを動かす)をトリガーとして検知する方法がよく分かりませんでした。

そこで、この記事ではドラッグ操作をトリガーとして検知する方法について書いていきます。jQuery UIというライブラリがあるのですが、こちらは後述でも書きますが、ドラッグ操作で要素が動いてしまいます。

実際のソースコード

方針としては、変数を用意して状態を持つことでドラッグ操作を検出するというものです。

let is_drag = false;

$(body).on('mousedown', function() {
    is_drag = true;
}

$(body).on('mouseup mouseleave', function() {
    is_drag = false;
}

$(body).on('mousemove', function() {
    if (is_drag === true) {
        //ドラッグ中に行いたい操作
    }
});

この例ではis_dragという変数を宣言して、マウスボタンを押したらtrueに、マウスボタンを離したらfalseにすることでドラッグしているかを判定しています。

これによって、ドラッグ中だけカーソルの位置を出力するなど、ドラッグをトリガーとした処理を行うことが出来ます。

7行目ではイベント発火条件としてmouseleaveも用いていますが、これはクリックした状態のままカーソルをウィンドウ外に出した場合もドラッグ終了とみなすための例外対応です。

jQueryUIのdraggableは？

「jQuery ドラッグ」とググると、jQueryUIというjQuery用のライブラリにある「draggable」という機能でドラッグアンドドロップが実装できると出てくるでしょう。

実際、ドラッグアンドドロップを実装したいならdraggableを使うのがベストですが、逆に言うと、要素をドラッグで動かしたくないけれどもドラッグをトリガーとして処理を行いたい場合はこの記事のサンプルコードのような方法で書くのが良いと思います。

draggableを使うと、対象の要素がドラッグで動いてしまうので、例えばドラッグ中にカーソルの座標を取得したい場合などカーソルに要素がついてきてしまいレイアウトが崩れてしまうのです。