ドラッグ可能なログインボックスを実現するネイティブJS

この記事では、ネイティブ JS で実装されたドラッグ可能なログインボックスを紹介します。その効果は次のとおりです。

実装されたコードは次のとおりです。

<!DOCTYPE html>
<html>
 
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
 
    <title>ドラッグ可能なログイン ボックスを実装するネイティブ JS</title>
 
    <スタイル タイプ="text/css">
        体 {
            /* 背景画像 */
            背景: url(images/0.png) #fff 上部中央 繰り返しなし;
            パディング: 0px;
            マージン: 0px;
            フォントサイズ: 12px;
            フォントファミリ: "Microsoft YaHei";
        }
 
        。リンク {
            テキスト配置: 右;
            行の高さ: 20px;
            右パディング: 40px;
        }
 
        .ui-ダイアログ {
            幅: 380ピクセル;
            高さ: 自動;
            表示: なし;
            位置: 絶対;
            zインデックス: 9000;
            上: 0px;
            左: 0px;
            境界線: 1px 実線 #D5D5D5;
            背景: #fff;
        }
 
        .ui-ダイアログ {
            テキスト装飾: なし;
        }
 
        .ui-ダイアログタイトル{
            高さ: 48px;
            行の高さ: 48px;
            パディング: 0px 20px;
            色: #535353;
            フォントサイズ: 16px;
            下部境界線: 1px 実線 #efefef;
            背景: #f5f5f5;
            カーソル: 移動;
            ユーザー選択: なし;
        }
 
        .ui-dialog-closebutton {
            幅: 16px;
            高さ: 16px;
            表示: ブロック;
            位置: 絶対;
            上: 12px;
            右: 20px;
            /* ログインボックスアイコンを閉じる*/
            背景: url(images/1.png) 繰り返しなし;
            カーソル: ポインタ;
 
        }
 
        .ui-dialog-closebutton:hover {
            /* マウスをホバーするとログインボックスアイコンが閉じます */
            背景: url(images/2.png);
        }
 
        .ui-ダイアログコンテンツ{
            パディング: 15px 20px;
        }
 
        .ui-ダイアログ-pt15 {
            パディング上部: 15px;
        }
 
        .ui-ダイアログ-l40 {
            高さ: 40px;
            行の高さ: 40px;
            テキスト配置: 右;
        }
 
        .ui-ダイアログ入力{
            幅: 100%;
            高さ: 40px;
            マージン: 0px;
            パディング: 0px;
            境界線: 1px 実線 #d5d5d5;
            フォントサイズ: 16px;
            色: #c1c1c1;
            テキストインデント: 25px;
            アウトライン: なし;
        }
 
        .ui-dialog-input-username {
            /* ユーザー名入力アイコン*/
            背景: url(images/4.png) 繰り返しなし 2px;
        }
 
        .ui-dialog-input-password {
            /* パスワード入力アイコン*/
            背景: url(images/3.png) 繰り返しなし 2px;
        }
 
        .ui-ダイアログ送信{
            幅: 100%;
            高さ: 50px;
            背景: #3b7ae3;
            境界線: なし;
            フォントサイズ: 16px;
            色: #fff;
            アウトライン: なし;
            テキスト装飾: なし;
            表示: ブロック;
            テキスト配置: 中央;
            行の高さ: 50px;
        }
 
        .ui-dialog-submit:hover {
            背景: #3f81b0;
        }
 
        .ui-マスク{
            幅: 100%;
            高さ: 100%;
            背景: #000;
            位置: 絶対;
            上: 0px;
            高さ: 0px;
            Zインデックス: 8000;
            不透明度: 0.4;
 
            /*IEの下位バージョンと互換性あり*/
            フィルター: アルファ(不透明度=40);
        }
    </スタイル>
</head>
 
<本文>
 
    <div class="link">
        <a href="javascript:showDialog();" >ログイン</a>
    </div>
 
    <!-- マウス選択イベントを防ぐために背景マスク レイヤーを設定します -->
    <div class="ui-mask" id="mask" onselectstart="return false"></div>
 
    <div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
 
        <div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">
            ログイン パス<a class="ui-dialog-closebutton" href="javascript:hideDialog();" ></a>
        </div>
 
        <div class="ui-dialog-content">
 
            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input class="ui-dialog-input ui-dialog-input-username" type="input" value="携帯電話/メール/ユーザー名" />
            </div>
 
            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input class="ui-dialog-input ui-dialog-input-password" type="input" value="password" />
            </div>
 
            <div class="ui-dialog-l40">
                <a href="#" >パスワードを忘れた場合</a>
            </div>
 
            <div>
                <a class="ui-dialog-submit" href="#" >ログイン</a>
            </div>
 
            <div class="ui-dialog-l40">
                <a href="#" >今すぐ登録</a>
            </div>
        </div>
    </div>
 
 
    <script type="text/javascript">
 
        //要素オブジェクトを取得するメソッドを宣言します。 function $(id) { return document.getElementById(id); }
 
        // 要素の自動センタリングメソッドを宣言します (el = Element)
        関数 autoCenter(el) {
 
            //Webページの表示領域の幅と高さを取得します。var bodyW = document.documentElement.clientWidth;
            var bodyH = document.documentElement.clientHeight;
 
            //渡された要素の実際の幅と高さを取得します。var elW = el.offsetWidth;
            var elH = el.offsetHeight;
 
            // 要素の左を、表示領域の幅から要素の幅を引いて 2 で割った値に設定し、上も同様に設定します。el.style.left = (bodyW - elW) / 2 + 'px';
            el.style.top = (bodyH - elH) / 2 + 'px';
 
        }
 
        //要素を表示領域全体に自動的に拡張する function fillToBody(el) {
 
            //現在の要素の幅と高さを、表示領域の幅と高さに設定します。el.style.width = document.documentElement.clientWidth + 'px';
            el.style.height = document.documentElement.clientHeight + 'px';
        }
 
        //マウスのX方向とY方向の初期値を0に設定する
        var マウスオフセットX = 0;
        var マウスオフセットY = 0;
 
        //ドラッグ可能かどうか var isDraging = false;
 
        // マウスイベント 1 - ドラッグされた要素の左上隅を基準としたマウスの座標を計算し、要素を移動可能としてマークします $('dialogDrag').addEventListener('mousedown', function (e) {
 
            //IE マウス イベント メカニズムと互換性があります var e = e || window.event;
 
            // マウス オフセットは、現在のイベントでマウスが押されたときの X 座標から、ページの左側に対するログイン フローティング レイヤーの位置を引いた値に等しくなります。mouseOffsetX = e.pageX - $('dialogMove').offsetLeft;
 
            // マウス オフセットは、現在のイベントでマウスが押されたときの Y 座標から、ページの上部に対するログイン フローティング レイヤーの位置を引いた値に等しくなります。mouseOffsetY = e.pageY - $('dialogMove').offsetTop;
 
            //ドラッグ可能フラグを true に設定します。
            ドラッグ中 = true;
 
        })
 
        // マウス イベント 2 - マウスが移動したときに、要素が移動可能としてマークされているかどうかを確認します。
        // はいの場合、要素の位置を現在のマウスの位置（最初のステップで取得したオフセットを差し引いたもの）に更新します。
        document.onmousemove = 関数 (e) {
 
            //IE マウス イベント メカニズムと互換性があります var e = e || window.event;
 
            // 現在のページ（Web ページの左上隅）でのマウスの位置を取得します。マウスが押されたときの e.pageX と e.pageY の値は異なります。var mouseX = e.pageX;
            var マウスY = e.pageY;
 
            //マウスが動いたときの x 座標と y 座標を記録します。var moveX = 0;
            var 移動Y = 0;
 
 
            //ドラッグが現在可能かどうか if (isDraging === true) {
 
                //ドラッグされた要素の位置は、ページに対するマウスの位置からドラッグされた要素の左上隅に対するマウスの位置を引いた値に等しくなります。moveX = mouseX - mouseOffsetX;
                移動Y = マウスY - マウスオフセットY;
 
                //ページの最大幅と高さを取得します（clientWidthとoffsetWidthの違いに注意してください）
                var pageWidth = document.documentElement.clientWidth;
                var pageHeight = document.documentElement.clientHeight;
 
                //フローティング レイヤー オブジェクトの幅と高さ var dialogWidth = $('dialogMove').offsetWidth;
                var dialogHeight = $('dialogMove').offsetHeight;
 
                //ドラッグ可能な最大値を計算します var maxX = pageWidth - dialogWidth;
                var maxY = ページの高さ - ダイアログの高さ;
 
                // 許容範囲外へのドラッグを防ぐための判断を行う moveX = Math.min(maxX, Math.max(0, moveX));
                移動Y = Math.min(maxY, Math.max(0, 移動Y));
 
                //ドラッグ要素の新しい値を設定します $('dialogMove').style.left = moveX + 'px';
                $('dialogMove').style.top = moveY + 'px';
 
            }
 
 
        }
 
        //マウスイベント3 - マウスが離されたら、要素を移動不可としてマークします document.onmouseup = function () {
            isDraging = false;
        }
 
        //ログインボックスを表示する function showDialog() {
            $('dialogMove').style.display = 'ブロック';
            $('mask').style.display = 'ブロック';
 
            //ログイン ボックスは中央に配置されます autoCenter($('dialogMove'));
 
            // 表示領域を埋めるためにマスクレイヤーを設定します fillToBody($('mask'))
 
 
        }
        //ログインボックスを非表示にする function hideDialog() {
            $('dialogMove').style.display = 'なし';
            $('mask').style.display = 'なし';
        }
 
        //ウィンドウサイズを変更する際の処理関数 window.onresize = function () {
 
            //ログイン ボックスは中央に配置されます autoCenter($('dialogMove'));
 
            //ログインボックスが表示されている場合は、マスクレイヤー表示関数を実行します if ($('dialogMove').style.display === 'block') {
                本文に埋め込む($('マスク'))
            }
 
 
        }
    </スクリプト>
</本文>
 
</html>

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

以下もご興味があるかもしれません: