ログインボックスのドラッグ効果を実現するための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. マウスの動きがドキュメントにバインドされたイベントなのはなぜですか?