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

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

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

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

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

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

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

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

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

マウスアップのコールバック関数では、 onmousemoveonmouseup値を 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript を使用してマウス ドラッグ イベントを実装する
  • マウスをドラッグしてサブウィンドウを移動するJS実装
  • jsはマウスをドラッグして画像を切り替えるメソッドを実装します
  • マウスドラッグ複数選択機能を実現する js の例
  • JS マウスドラッグ例の分析
  • jsMindはマウスをドラッグしてノードの位置を調整します
  • js はマウスドラッグ div を左右にスライドすることを実現します
  • JavaScript マウスドラッグイベントの詳細な説明
  • マウスのドラッグとズームを実現する js div サンプルコード
  • JavaScriptはキャンバスを使用してマウスドラッグ機能を実装します

<<:  MySQL をクリーンにアンインストールする方法 (テスト済みで効果的)

>>:  CSSは左固定と右適応のレイアウト方法を実現します

推薦する

vue data が関数である理由をご存知ですか?

公式サイトの説明: コンポーネントを定義する場合、コンポーネントは複数のインスタンスを作成するために...

jQueryはシンプルなボタンの色の変更を実装します

HTML と CSS で、ボタンの色を設定したいとします。 目的の効果は得られますが、プロセスはかな...

Linux ログ内のキーワードとその前後の情報を検索する方法の例

日常業務では、ログを表示する必要がよくあります。たとえば、 tail コマンドを使用してログをリアル...

MySQL 起動時に「サーバーは PID ファイルを更新せずに終了しました」というエラーが報告される理由の詳細な分析

多くの人が MySQL の起動時にこのエラーに遭遇しています。まず、このエラーの前提は、サービス ス...

Docker Compose のインストールと使用手順

目次1. Docker Compose とは何ですか? 2. Docker Composeのインスト...

Vue ショッピングカートのケーススタディ

目次1. ショッピングカートの例2. コードの実装3. まとめ1. ショッピングカートの例一連の学習...

バックエンドから返される 100,000 個のデータをフロントエンドでより適切に表示するにはどうすればよいですか?

目次予備作業バックエンド構築フロントエンドページダイレクトレンダリングsetTimeout ページン...

無効と読み取り専用の機能と違い

1: readonly は、このコントロールをロックして、インターフェイス上で変更できないようにしま...

nginx 設定チュートリアルにおける add_header の落とし穴の詳細な説明

序文add_header は、headers モジュールで定義されたディレクティブです。名前が示すよ...

CentOS7 で yum ソースをインストールし、コマンド rz と sz をアップロードおよびダウンロードする方法 (画像付き)

** CentOS7 で yum ソースをインストールし、rz および sz コマンドをアップロー...

モバイル適応型ウェブページ効果は、小さな表示ページの問題を解決します

仕事上、携帯電話に適応した Web ページ効果を作成する必要があります。ようやく完成しました。まずは...

HTMLの表のtbodyは上下左右にスライドできます

テーブル ヘッダーが固定されている場合は、それを 2 つのテーブルに分割する必要があります。1 つの...

印刷広告を成功させるための「3I」基準

国内の多くの広告主にとって、印刷広告の制作と評価は、しばしばかなり主観的です。自分の感情や美的感覚に...

MySQL 独立インデックスと共同インデックスの選択

複数列のインデックスについては、理解が不足していることがよくあります。よくある間違いは、多数の列に独...