【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も用いていますが、これはクリックした状態のままカーソルをウィンドウ外に出した場合もドラッグ終了とみなすための例外対応です。