シンプルなドラッグ効果を実現するJavaScript

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

1. まず足場を構築します。

* {
            マージン: 0;
            パディング: 0;
        }
        
        ｐ {
            背景: スカイブルー;
            テキスト配置: 中央;
        }
        
        html,
        体 {
            幅: 100%;
            高さ: 100%;
        }
        
        。マスク {
            幅: 100%;
            高さ: 100%;
            位置: 固定;
            左: 0;
            上: 0;
            背景: rgba(0, 0, 0, .5);
            表示: なし;
        }
        
        。ログイン {
            幅: 400ピクセル;
            高さ: 300px;
            背景：紫;
            位置: 絶対;
            左: 50%;
            上位: 50%;
            変換: translate(-50%, -50%);
            表示: なし;
            カーソル: 移動;
        }
        
        .ログイン>スパン{
            表示: インラインブロック;
            幅: 50px;
            高さ: 50px;
            背景: 赤;
            位置: 絶対;
            上: 0;
            右: 0;
        }

<p>私はpタグです</p>
    <a href="http://www.baidu.com" >公式サイト</a>
    <div class="mask"></div>
    <div class="ログイン">
        <span></span>
</div>

2. 論理部分

//1. 操作対象となる要素を取得します。const oP = document.querySelector("p");
const oMask = document.querySelector(".mask");
const oLogin = document.querySelector(".login");
const oClose = oLogin.querySelector(".login>span");
// コンソールログ(oClose);
 
//2. クリックイベントをリッスンする oP.onclick = function() {
    oMask.style.display = "ブロック";
    oLogin.style.display = "ブロック";
        };
        oClose.onclick = 関数() {
            oMask.style.display = "なし";
            oLogin.style.display = "なし";
        };
 
//3. ログインボックスの押下と移動のイベントをリッスンする oLogin.onmousedown = function(e) {
            e = e || e.window;
 
            //1. 固定距離を計算します。const x = e.pageX - oLogin.offsetLeft;
            定数 y = e.pageY - oLogin.offsetTop;
            // コンソールログ(x);
 
            //2. モバイルイベントをリッスンする oLogin.onmousemove = function(e) {
                e = e || e.window;
 
                //3. 移動後のオフセットを計算します。let offsetX = e.pageX - x;
                offsetY = e.pageY - y とします。
 
                //4. ログイン ボックスの位置をリセットします。oLogin.style.left = offsetX + 'px';
                oLogin.style.top = offsetY + 'px';
            };
        };
 
        oLogin.onmouseup = 関数() {
            oLogin.onmousemove = null;
        };