トップに戻る
【初心者向け】ドラッグ操作をJavaScriptで実装する方法
 > 
JavaScript > 
プログラミング > 
HOME > 
2024/07/29

【初心者向け】ドラッグ操作をJavaScriptで実装する方法

JavaScriptにおいて、稀に実装する機会があるのが「ドラッグアンドドロップ機能」。

例えば、コメントのようなものを配置して自由に動かしたり、音量バーのようなものを実装したり、様々な場面でドラッグ操作が必要とされています。

今回は、そんなドラッグ操作をJavaScriptで実装する方法について解説していきます。

【非推奨】jQuery UIを活用する

ドラッグ操作を実装する際、現状最も手軽な手段と言えるのが、jQuery UIの活用です。

https://jqueryui.com/draggable/

jQuery UIはjQueryライブラリを使った環境で動かせる拡張ライブラリで、マウス操作やフォーム操作に対応した様々なメソッドを提供しています。

そのうちの一つに「draggable」というメソッドがあり、これをドラッグしたい要素に適用することで、簡単にドラッグ操作が実現できるのです。

現在は開発終了している

注意として、jQuery UIは現在開発停止、つまり今後一切のアップデートが行われないライブラリです。

致命的なバグや欠陥、悪用の手段が見つかったとしても、公式から修正版のアップデートなどは出ないため、保守・運用性に欠けるライブラリであることに留意してください。

GUI部品への実装がメインなので、基本的に問題になることはないでしょうが、余裕があるなら以降の方法などで自力実装した方が無難です。

JavaScriptでドラッグ操作を実装する

JavaScriptを使ってドラッグ操作を実装する場合は、以下のようなコードになります。

（実装方法は色々ありますが、一番簡単なのがこの方法です。）

<body>
    <!-- 例として動かす対象の要素を配置 -->
    <div
        id="movement-target"
        style="width: 100px; height: 100px; background-color: red;"
    />


    <script>
        <!-- ここにJavaScriptを記述 -->
    </script>
</body>
// 動かす要素を変数に代入
const target = document.querySelector("#movement-target");

// マウスの挙動を判定するフラグ
let mouseDownFlag = false;

/* 1. 動かしたい要素の上でマウスの左クリックが押下された場合 */
target.addEventListener("mousedown", function(){
    // フラグをtrueに変更
    mouseDownFlag = true;
});

/* 2. マウスの左クリックが解除した（指を離した）場合 */
document.addEventListener("mouseup", function(){
    // マウスが押下されている状態なら、
    // falseをフラグに代入して解除する
    if (mouseDownFlag) {
        mouseDownFlag = false;
    }
});

/* 3. マウスを動かた場合のイベント(ドラッグ操作の処理) */
document.addEventListener("mousemove", function(event){
    // マウスが押下されているなら、ポインタの位置に要素を移動させる
    if (mouseDownFlag) {
        // 要素を動かすためのおまじない
        //（CSS等で初めからスタイルを定義しても良い）
        target.style.position = "absolute";
        target.style.transform = "translate(-50%, -50%)";

        // マウスカーソルと対象の要素のX・Y座標を同じにする
        target.style.top = event.clientY + "px";
        target.style.left = event.clientX + "px";
    }
});

上記のプログラムについて、順を追って仕組みを解説していきます。

① まずはマウスカーソルに追従する処理

ドラッグ操作では対象のオブジェクトが、マウスカーソルに追従するように動くのが一般的ですよね。

とにもかくにも、まずはその部分の実装をしなければ話になりません。

その処理を実装しているのが、上記コードでいう3のメソッドです。

/* 3. マウスを動かた場合のイベント(ドラッグ操作の処理) */
document.addEventListener("mousemove", function(event){
    // マウスが押下されているなら、ポインタの位置に要素を移動させる
    if (mouseDownFlag) {
        // 要素を動かすためのおまじない
        //（CSS等で初めからスタイルを定義しても良い）
        target.style.position = "absolute";
        target.style.transform = "translate(-50%, -50%)";

        // マウスカーソルと対象の要素のX・Y座標を同じにする
        target.style.top = event.clientY + "px";
        target.style.left = event.clientX + "px";
    }
});

まず、documentに対してのイベントリスナーを設置。

これは「画面上でマウスが動いた際に実行させる処理を実装する」ということをしています。

functionの中にあるのが、画面上でマウスが動いた際に実行される処理です。

試しに、変数mouseDownFlagにtrueを代入してみると、以下のようにオブジェクトがマウスカーソルを追従するように動きます。

// 試しにフラグをtrueに（本実装時は削除）
let mouseDownFlag = true

② マウスが押された後に動くにようにする

常にマウスに追従されてはドラッグ操作の本懐から外れるので、次はオブジェクトをクリックしたら追従を開始するようにします。

この部分ですね。

// マウスの挙動を判定するフラグ
let mouseDownFlag = false;

/* 1. 動かしたい要素の上でマウスの左クリックが押下された場合 */
target.addEventListener("mousedown", function(){
    // フラグをtrueに変更
    mouseDownFlag = true;
});

この処理を追記すると、オブジェクトをクリックした後、オブジェクトがマウスカーソルを追従するようになります。

注意として、mousedownイベントは動かしたい要素(ここでは変数targetに格納されたオブジェクト)に対して設置すること。

他のイベントリスナーをdocumentに設置しているのは、動かしたい要素と関係のない処理だからです。

③ マウスを押してから離した後に追従を解除する

最後に、「ドラッグ（マウスを押している間だけ移動）させる」という動きを実現するため、マウスを離した際に追従を解除するようにします。

このプログラムの場合、変数mouseDownFlagが「マウスが押下されている状態かどうか」を判定しているため、マウスを離した際に、変数mouseDownFlagをfalseにすればOKです。

以下のコードですね。

/* 2. マウスの左クリックが解除した（指を離した）場合 */
document.addEventListener("mouseup", function(){
    // マウスが押下されている状態なら、
    // falseをフラグに代入して解除する
    if (mouseDownFlag) {
        mouseDownFlag = false;
    }
});

この処理を実装すると、「マウスを押下している間はオブジェクトが追従、マウスを離したら追従を解除」という、ドラッグ操作の要件を満たすことができます。

ドラッグ操作が完成！

まとめ

JavaScriptでドラッグアンドドロップを実装する方法は様々ですが、今回は最も簡単に作ったプログラムを紹介しました。

ただ、この場合は動的に追加されるオブジェクトに対して処理を適用するのが面倒なので、本格的に実装するならjQuery（UIではなく）で実装するのがおすすめです。

SHARE