JavaScript は自由に移動するウィンドウのマウス制御を実装します

この記事では、フリーウィンドウのマウス制御を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>マウスでウィンドウを移動しました</title>
    <スタイル>
        .mainDiv {
            幅: 350ピクセル;
            高さ: 200px;
            境界線: 2px 黒実線;
            位置: 絶対;
        }

        .titleDiv {
            幅: 350ピクセル;
            高さ: 30px;
            背景色: 黄緑;
            テキスト配置: 中央;
            行の高さ: 30px;
        }

        .contentDiv {
            幅: 350ピクセル;
            高さ: 170ピクセル;
            背景色: SandyBrown ;
            テキスト配置: 中央;
        }
    </スタイル>
</head>
<本文>
<!--onmousedown: マウス ボタンが押されたときにイベントが発生します。onmousemove: マウス ポインターが指定されたオブジェクトに移動したときにイベントが発生します -->
<div class="mainDiv" id="mainDiv" style="上: 20px;左: 20px">
    <div class="titleDiv" id="titleDiv" onmousedown="mouseDown()" onmouseup="mouseUp()">
        タイトルバー</div>
    <div class="contentDiv">
        《マウスで操作できるフリーウィンドウ》<br>
        注意: MainDiv は、位置が絶対位置に設定されるまで移動できません</div>
</div>
<スクリプト>
    var dx;
    var dy;
    var mainDivObj = null;
    var titleDivObj = null;

    /**
     * マウス押下関数、マウスが押されたときにこの関数を実行します*/
    関数mouseDown() {
        //マウスボタンの値を取得します。0 はマウスの左ボタン、1 はマウスのスクロールボタン、2 はマウスの右ボタンです。if (event.button == 0) {
            mainDivObj = document.getElementById("mainDiv");
            titleDivObj = document.getElementById("titleDiv");
            //マウス スタイルを設定します titleDivObj.style.cursor = "move";
            //メイン div の影のスタイルを設定します mainDivObj.style.boxShadow = "0px 0px 10px #000";
            //マウスの現在の座標を取得します。let x = event.x;
            y = event.y とします。
            dx = x - parseInt(mainDivObj.style.left);
            dy = y - parseInt(mainDivObj.style.top);

        }
    }

    //マウスが移動したときに呼び出します document.onmousemove = mouseMove;

    /**
     * マウスを押すと関数が移動します。マウスが移動すると、divを移動する関数が実行されます。
     */
    関数mouseMove() {
        mainDivObj != null の場合 {
            //現在のマウスの動きの座標位置を取得します。let x = event.x; //マウスの動きの x 軸座標 let y = event.y; //マウスの動きの y 軸座標 //移動後の div の左と上との距離を計算します //現在の座標を使用して、div 内のマウスの位置と div の左と上との距離を減算します。let left = x - dx;
            top = y - dyとします。
            //div の新しい座標位置を設定します。mainDivObj.style.left = left + "px";
            mainDivObj.style.top = top + "px";
        }
    }
    /**
     * マウスリリース関数、マウスがリリースされたときにこの関数が実行されます*/
    関数 mouseUp() {
        mainDivObj != null の場合 {
            dx = null;
            dy = null;
            //div の影のスタイルを設定します mainDivObj.style.boxShadow="none";
            mainDivObj = null;
            titleDivObj.style.cursor="ポインター";
            titleDivObj = null;
        }
    }
</スクリプト>
</本文>
</html>

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

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