マウスのドラッグ効果を実現する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は左固定と右適応のレイアウト方法を実現します

推薦する

docker ログが取得できない問題の解決方法

毎日サービスをチェックしているときに、portainer からコンテナ ログを確認しようとしたところ...

Vue コンポーネント化の一般的な方法: コンポーネント値の転送と通信

関連する知識ポイント親コンポーネントから子コンポーネントに値を渡す子コンポーネントから親コンポーネン...

MySQL のタイムスタンプと日付時刻のタイムゾーンの問題によって生じる DTS の落とし穴の詳細な説明

目次MySQL で現在の時刻を表現するにはどうすればよいでしょうか?結論は確認するピットMySQL ...

Nginx でアンチホットリンクを設定するための手順を完了する

必要:通常、サイト側は、ウェブサイト上の動画や写真が盗まれるのを防ぎたいと考えています。結局のところ...

MySQL スロークエリログの有効化と設定

導入MySQL スロー クエリ ログは、問題のある SQL ステートメントのトラブルシューティングや...

非常に詳細な基本的なJavaScript構文ルール

目次01 JavaScript(略称:js) js は 3 つの部分に分かれています。 JavaSc...

JavaScript でウェブ プレーヤーを実装する

今日は、JavaScript を使用して Web ページ上にプレーヤーを作成する方法を紹介します。誰...

MySQLテーブルのテーブル構造を素早く変更する方法

MySQL テーブルのテーブル構造をすばやく変更する - 「MySQL 管理」から抜粋 ALTER ...

LINUX でプロセスを表示する 4 つの方法 (要約)

プロセスは CPU とメモリ内で実行されるプログラム コードであり、各プロセスは 1 つ以上のプロセ...

MySQLデータ損失のトラブルシューティング事例

目次序文現地調査ケースの再現要約する序文最近、友人が突然WeChatで連絡してきて、MySQLでデー...

HTML の基本 - CSS スタイルシート、スタイル属性、フォーマット、レイアウトの詳細

1.位置:固定一部の Web サイトの右下隅にあるポップアップ ウィンドウなどの、ブラウザーを基準と...

MySql 5.7.17 winx64 のインストールと設定に関する詳細なチュートリアル

1. ソフトウェアをダウンロードする1. MySQL の公式サイトにアクセスし、Oracle アカウ...

ミニプログラムはリストのカウントダウン機能を実装します

この記事の例では、ミニプログラムでリストカウントダウンを実装するための具体的なコードを参考までに共有...

Vue のライフサイクルとフック関数

目次1.ライフサイクルとは何か2. Vueのライフサイクル3. ライフサイクルフック関数1.ライフサ...