JavaScript實現鼠標控制自由移動的窗口

本文實例為大傢分享瞭JavaScript實現鼠標控制自由窗口的具體代碼,供大傢參考,具體內容如下

代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用鼠標移動的窗口</title>
    <style>
        .mainDiv {
            width: 350px;
            height: 200px;
            border: 2px black solid;
            position: absolute;
        }

        .titleDiv {
            width: 350px;
            height: 30px;
            background-color: YellowGreen  ;
            text-align: center;
            line-height: 30px;
        }

        .contentDiv {
            width: 350px;
            height: 170px;
            background-color: SandyBrown ;
            text-align: center;
        }
    </style>
</head>
<body>
<!--onmousedown:事件會在鼠標按鍵被按下時發生; onmousemove:事件會在鼠標指針移到指定的對象時發生-->
<div class="mainDiv" id="mainDiv" style="top: 20px;left: 20px">
    <div class="titleDiv" id="titleDiv" onmousedown="mouseDown()" onmouseup="mouseUp()">
        標題欄
    </div>
    <div class="contentDiv">
        《鼠標可控的自由窗口》<br>
        註意:沒有給mainDiv設置position為absolute前不能移動
    </div>
</div>
<script>
    var dx;
    var dy;
    var mainDivObj = null;
    var titleDivObj = null;

    /**
     * 鼠標按下函數,當鼠標按下時執行該函數
     */
    function 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;
            let y = event.y;
            dx = x - parseInt(mainDivObj.style.left);
            dy = y - parseInt(mainDivObj.style.top);

        }
    }

    //鼠標移動的時候調用
    document.onmousemove = mouseMove;

    /**
     * 按下鼠標後移動函數,當鼠標移動是執行該函數,移動div
     */
    function mouseMove() {
        if (mainDivObj != null) {
            //獲得鼠標當前移動的坐標位置
            let x = event.x;//鼠標移動的x軸的坐標
            let y = event.y;//鼠標移動的y軸的坐標
            //計算div移動後的left與top的距離
            //使用當前坐標減去鼠標在div中的位置與div左邊與頂端的距離
            let left = x - dx;
            let top = y - dy;
            //設置div新的坐標位置
            mainDivObj.style.left = left + "px";
            mainDivObj.style.top = top + "px";
        }
    }
    /**
     * 鼠標松開函數,當鼠標松開時執行該函數
     */
    function mouseUp() {
        if (mainDivObj != null) {
            dx = null;
            dy = null;
            //設置div的陰影樣式
            mainDivObj.style.boxShadow="none";
            mainDivObj = null;
            titleDivObj.style.cursor="pointer";
            titleDivObj = null;
        }
    }
</script>
</body>
</html>

以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。

推薦閱讀: