ログインボックスのドラッグ効果を実現するためのJavascript

ログインボックスのドラッグ効果を実現するためのJavascript

この記事では、ログインボックスのドラッグ効果を実現するためのJavascriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

需要分析

1. ポップアップログインボックスをクリックします

2. ログインボックスをログインボックスの特定の領域内の任意の位置にドラッグできます

3. ログインボックスを閉じると、次回クリックしたときにポップアップログインボックスが元の位置に戻ります。

具体的な実装

完全なコード

<!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>
    <スタイル>
        * {
            パディング: 0;
            マージン: 0;
        }
        {
            テキスト装飾: なし;
            色: 黒;
        }
        .ログインヘッダー{
           /* margin: 0 auto; */ /* これを動作させるには幅を設定する必要があります*/
            高さ: 30px;
            行の高さ: 30px;
            フォントサイズ: 24px;
            テキスト配置: 中央;
        }
        。ログイン {
            幅: 500ピクセル;
            高さ: 300px;
            位置: 絶対;
            境界線: #725252 実線 1px;
           /* 変換: translate(-50%,-50%); */
            左: 50%;
            上位: 50%;
            /* ここではマージンが存在できません。左と右のみを変更したため、移動後にマージンが再び有効になり、失敗が発生します*/
           /* 左余白: -250px;
            上マージン: 50px; */
            背景色: 貝殻;
            変換: translate(-50%, -50%);
            zインデックス: 9999;
            ボックスシャドウ: 0 0 30px 黒;
            表示: なし;
            
        }
        .ログインタイトル{
            位置: 相対的;
            マージン: 20px 0 0 0;
            高さ: 40px;
            行の高さ: 40px;
            テキスト配置: 中央;
            フォントサイズ: 20px;
            カーソル: 移動;
        }
        .close-btn {
            位置: 絶対;
            幅: 30ピクセル;
            高さ: 30px;
            右: -15px;
            上: -35px;
            境界線の半径: 50%;
            背景色: #ffffff;
            行の高さ: 30px;
        }
        .ログインコンテンツ{
            マージン: 15px 自動;
            幅: 450ピクセル;
            高さ: 230px;
        }
        .ログイン入力ラベル{
            上マージン: 20px;
            左マージン: 30px;
            幅: 100ピクセル;
            テキスト配置: 右;
            高さ: 30px;
            行の高さ: 30px;
            表示: インラインブロック;
        }
        .ログイン入力入力{
            高さ: 30px;
            幅: 230ピクセル;
            境界線の半径: 10px;
            境界線: 1px実線 rgba(0, 0, 0, .5);
        }
        .ログインボタン{
            幅: 100ピクセル;
            高さ: 50px;
            マージン: 30px 自動;
            境界線: 1px 黒一色;
            境界線の半径: 7px;
            行の高さ: 50px;
            テキスト配置: 中央;
        }
    </スタイル>
</head>
<本文>
    <div class="login-header"><a href="javascript:;" >ログインポップアップログインボックス</a></div>
    <div class="ログイン">
        <div class="login-title">ログイン<span><a href="javascript:;" class="close-btn">x</a></span>
        </div>
        <div class="ログインコンテンツ">
                <div class="ログイン入力">
                    <label for="name">アカウント:</label>
                    <input type="text" id="名前">
                </div>
                <div class="ログイン入力">
                    <label for="pwd">ログインパスワード:</label>
                    <input type="password" id="pwd">
                </div>
                <div class="login-btn">ログイン</div>
        </div>
    </div>
    <スクリプト>
        出力 = document.querySelector('.login-header');
        login_box を document.querySelector('.login') とします。
        title = document.querySelector('.login-title'); とします。
        close = document.querySelector('.close-btn'); とします。
        document.querySelector('.login-content') を移動します。
        out.addEventListener('click',function() {
            login_box.style.display = 'ブロック';
        });
        close.addEventListener('click',function() {
            login_box.style.left = 50 + '%';
                login_box.style.top = 50 + '%';
            login_box.style.display = 'なし';
        });
        /* タイトルのみ移動できます */
        title.addEventListener('mousedown',function(e) {
            /* マウスが押された瞬間のタイトル内のマウスの距離を計算し、次のマウスの押下まで変更せずに保持します*/
            /* ここで login_box のオフセットを使用する必要があります。これは、title の前に絶対位置の login_box があり、そのオフセットが 0 であるためです */
            mousex = e.pageX - login_box.offsetLeft とします。
            mousey = e.pageY - login_box.offsetTop とします。
            console.log(マウスのex、マウスのy);
            /* ここでタイトルではなくドキュメントが使用されているのはなぜでしょうか。その理由は、マウスの動きが速すぎてタイトルの範囲を超えてしまう可能性があるためです。もう 1 つの理由は、タイトル ボックスがブロックされるのを防ぐためです。マウスがタイトル上にない場合は、移動およびキャンセル イベントをトリガーできないため、無効にすることはできません。*/
            関数movee(e) {
                login_box.style.left = e.pageX - mousex + 'px';
                login_box.style.top = e.pageY - mousey + 'px';
                
            }
            document.addEventListener('mousemove', 移動先)
            document.addEventListener('mouseup',function() {
                
                document.removeEventListener('mousemove', 移動先)
            })
        });
    
    </スクリプト>
</本文>
</html>

ポップアップログインボックスの実装方法

JavaScript クリックイベントを使用し、ポップアップがクリックされたときにログインボックスの表示をブロック解除するように設定します。

out.addEventListener('click',function() {
            login_box.style.display = 'ブロック';
        });

抗力効果の実装

ドラッグ効果の実装は、次の 3 つのステップに分かれています。

  • マウスが押されると、ログインボックス内のマウスの座標を取得します
  • マウスを動かしてログインボックスが移動する位置を取得します
  • マウスを離すとマウス移動イベントがキャンセルされます

1. マウスを押してログインボックス内のマウスの座標を取得します

ログイン ボックス内のマウスの位置を取得するにはどうすればよいでしょうか。ここでは、ページ内のマウスの座標からログイン ボックスの左余白を引いた値を使用します。

上の図から、ログイン ボックス内のマウスの座標は次のようになります: (x, y) = (page X − offsetLeft, Page Y − offsetTop) (x,y) = (pageX - offsetLeft, PageY - offsetTop) (x,y) = (pageX−offsetLeft, PageY−offsetTop)
もちろん、境界線がオフセットに与える影響はここでは考慮されません。

/* マウスが押された瞬間のタイトル内のマウスの距離を計算し、次のマウスの押下まで変更せずに保持します*/
/* ここで login_box のオフセットを使用する必要があります。これは、title の前に絶対位置の login_box があり、そのオフセットが 0 であるためです */
mousex = e.pageX - login_box.offsetLeft とします。
mousey = e.pageY - login_box.offsetTop とします。

2. マウスを動かしてログインボックスの位置を確認します

この時点では、ログイン ボックス内のマウスの位置は、マウスを離すまで変化しません。この機能を使用して、ログイン ボックスの現在の位置を取得できます。つまり、ページ上のマウスの座標からページ上のマウスの座標を引いた値です。ここではこれ以上の説明はしません。

/* ここでタイトルではなくドキュメントが使用されているのはなぜでしょうか。その理由は、マウスの動きが速すぎてタイトルの範囲を超えてしまう可能性があるためです。もう 1 つの理由は、タイトル ボックスがブロックされるのを防ぐためです。マウスがタイトル上にない場合は、移動およびキャンセル イベントをトリガーできないため、無効にすることはできません。*/
            関数movee(e) {
                login_box.style.left = e.pageX - mousex + 'px';
                login_box.style.top = e.pageY - mousey + 'px';
                
            }
            document.addEventListener('mousemove', 移動先)

3. マウスを離してマウス移動イベントをキャンセルします

document.addEventListener('mouseup',function() {
                document.removeEventListener('mousemove', 移動先)
            })

ログインボックスを閉じて元の位置に戻ります

表示を「なし」に設定するだけです。詳細についてはコードを参照してください。

close.addEventListener('click',function() {
            login_box.style.left = 50 + '%';
            login_box.style.top = 50 + '%';
            login_box.style.display = 'なし';
        });

エフェクト表示

コードを実装する際に遭遇した困難

1. marginを使用して中央に配置する場合は、 widthが必要です。長い間コードを書いていなかったので、忘れてしまいました。
2. ログイン ボックスにmarginを設定したため、位置がずれてしまいました。これは、座標計算式でmarginが考慮されていないためです (配置の左右のみを考慮します)。その結果、ログイン ボックスは座標位置に到達し、その後maginのために再び位置を調整します。解決策としては、移動の座標を計算するときにマージンを減算する必要があります。
3. オフセットは配置された親ノードを基準とするため、この点に注意してください。
4. マウスの動きがドキュメントにバインドされたイベントなのはなぜですか?

マウスの動きが速すぎて正しく処理されないのを防ぐために、イベントはドキュメントにバインドされます。ログイン ボックスが絶対位置に配置されていない場合、移動プロセス中に他の要素によってブロックされる可能性があるため、移動イベントはログイン ボックスではなくドキュメントにバインドされます。

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

以下もご興味があるかもしれません:
  • jsはログインボックスのマウスドラッグ効果を実現します
  • js は Baidu ログイン ボックスのマウス ドラッグ効果を実現します
  • ドラッグ可能なログインボックスを実現するネイティブJS

<<:  Nginx は https ウェブサイト構成コード例を実装します

>>:  HTMLは角丸四角形を簡単に実装します

推薦する

Dockerコンテナのホスト間通信におけるダイレクトルーティングの詳細な説明

概要Docker 自体の現在のデフォルト ネットワークについては、単一ホスト上の異なる Docker...

Vueリストレンダリングキーの原理と機能の詳細な説明

目次リストレンダリングキーの原理と機能主要原則の分析キーの役割要約するリストレンダリングキーの原理と...

Docker で Oracle 11g イメージ構成をプルダウンする際の問題を分析する

1. イメージをプルするdocker pull レジストリ.cn-hangzhou.aliyuncs...

MySQLをシンプルに学ぶ

序文データベースは常に私の弱点でした。自分の経験 (python+sqlalchemy) を組み合わ...

HTML で自動ページジャンプを実現する 5 つの方法

前回の記事では、HTML ページが 3 秒後に自動的にジャンプする一般的な 3 つの方法を紹介しまし...

Tomcat 実行時の JVM エンコーディングの問題を修正

質問:最近、プロジェクトを展開すると文字化けしたデータが出てきました。確認したところ、プロジェクトは...

WeChatミニプログラムでEchartとサブパッケージを使用するための完全な手順

序文休日は終わっていますが、それは別の形で(お腹に触れることで)私たちに現れます。ミニプログラムでデ...

CSS 向け SASS スタイル プログラミング ガイド

SASS を使用する開発者が増えるにつれて、SASS コードの数に注意する必要があります。 SASS...

jsを使用してシンプルな虫眼鏡効果を実現します

この記事では、簡単な虫眼鏡効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な内...

JSはreduce()メソッドを使用してツリー構造データを処理します

目次意味文法例1. 初期値initが渡されない2. 初期値を渡す場合3. アレイの重複排除4. Re...

VMware仮想マシンでのLinuxのコピー&ペーストの詳細な説明

1. VMware Workstation 上の Linux: 1. ソースの更新(オプション) v...

入力テキスト ボックスと画像検証コードの位置合わせの問題 (画像は常に入力より 1 つ上になります)

Web ページ制作では、input と img が同じ行に配置されることが多く、img タグが常に ...

バントリストコンポーネントをスクロールしても、スクロールバーの位置は保持されます。

バントリストコンポーネントをスクロールするときに、スクロールバーの位置が保持されます。これは、kee...

VMware Workstation 15 Pro インストール ガイド (初心者向け)

01. VMware Workstation Pro 15 のダウンロードダウンロード: VMwa...

自己終了XHTMLタグを書くときに注意すべきこと

XHTMLの img タグは、次のように記述する必要があります: <img alt="...