マウスのドラッグ効果を実現するJavaScript

この記事では、マウスドラッグ効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

今回のエフェクト画像は以下の通り。

この実験の難しさは、ボックスとマウスの相対的な位置を変えずに、マウスを押したり動かしたりすることでドラッグ効果を実現することだと思います。

ドラッグ効果を実現するにはどうすればいいですか?

マウスが押された状態、マウスが移動された状態、マウスが上げられた状態をそれぞれ表す、 onmousedown 、 onmousemove 、 onmouseup 3 つの関数を使用する必要があります。

マウス押下のコールバック関数では、 clientXとclientYを通じてマウスの初期位置を取得し、 offsetLeftとoffsetTopを通じてボックスの初期位置を取得し、マウスの初期位置とボックスの初期位置の差を計算する必要があります。

マウス移動コールバック関数では、マウスの位置と以前に計算された差に基づいてボックスの現在の位置を取得し、左と上の値を変更する必要があります。位置を絶対に設定することを忘れないでください (忘れていたので...)

マウスアップのコールバック関数では、 onmousemoveとonmouseup値を null に設定して、マウスの移動とマウスアップをクリアする必要があります。

こちらも注目！！！

マウス移動機能とマウスリフト機能は、マウス押下機能内に記述する必要があります。これは、マウスが押された後の後続の動作を設計する必要があるためです。次の点が非常に重要です。

マウスダウン機能はdivにあり、マウス移動とマウスアップ機能はドキュメントにあります。

div内でマウスを動かすのではなく、ページ全体を動かしたいからです

重要なポイントはおそらく次のとおりです。コードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        ＃箱{
            幅: 100ピクセル;
            高さ: 100px;
            背景色: アクアマリン;
            境界線の半径: 14px;
            ボックスの影: 2px 2px 6px rgba(0,0,0,.3);

            /* 皆さん、位置を設定せずに左に移動して変更したいとします。 。 。 */
            位置: 絶対;
        }
    </スタイル>
</head>
<本文>
    <div id="box"></div>
    <スクリプト>
        box = document.getElementById("box"); とします。
        box.onmousedown=関数(イベント){
            disx = event.clientX-box.offsetLeft; とします。
            disy=event.clientY-box.offsetTop とします。
            //これはbox.onmousemoveではなく、document.onmousemoveです
            document.onmousemove=関数(イベント){
                box.style.left=event.clientX-disx+'px';
                box.style.top=event.clientY-disy+'px';
            }

            //ommousedownに書き込む document.onmouseup=function(){
                //両方をnullに設定する
            ドキュメント.onmousemove=null;
            ドキュメント.onmouseup=null;
            false を返します。
        }
        }
        
    </スクリプト>
</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: