JavaScript实现鼠标控制自由移动的窗口

最新推荐文章于 2024-04-16 19:44:59 发布

妄痴梦中

最新推荐文章于 2024-04-16 19:44:59 发布

阅读量665

点赞数

分类专栏： js实用小工具的制作文章标签： javascript

本文链接：https://blog.csdn.net/an_gentle_killer/article/details/118032732

版权

js实用小工具的制作专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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>

妄痴梦中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现鼠标控制自由移动的窗口

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用鼠标移动的窗口</title> <style> .mainDiv { width: 350px; height: 200px; border: 2px black soli.
复制链接

扫一扫