HTML+js实现鼠标绘制可拖动矩形

最新推荐文章于 2023-10-18 10:32:00 发布

baolin811

最新推荐文章于 2023-10-18 10:32:00 发布

阅读量1.2w

点赞数 8

分类专栏：前端文章标签：前端

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript实现的简单网页应用，该应用允许用户通过鼠标点击并拖动来绘制不同大小的矩形。文章详细解释了如何通过监听鼠标事件来更新元素的位置和尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE
 html>

<html>

<head>

<meta
 charset="gb2312" />

<title></title>

<style
 type="text/css">

.box
 {

    background: #f00;

    width:
 0px;

    height:
 0px;

    position:
 absolute;

    opacity:
 0.5;

    cursor:
 move;

}

</style>

<script
 type="text/javascript">

window.onload
 = function(e)
 {

    e
 = e || window.event;

    //
 startX, startY 为鼠标点击时初始坐标

    //
 diffX, diffY 为鼠标初始坐标与 box 左上角坐标之差，用于拖动

    var startX,
 startY, diffX, diffY;

    //
 是否拖动，初始为 false

    var dragging
 = false;

          

    //
 鼠标按下

    document.onmousedown
 = function(e)
 {

        startX
 = e.pageX;

        startY
 = e.pageY;

          

        //
 如果鼠标在 box 上被按下

        if(e.target.className.match(/box/))
 {

            //
 允许拖动

            dragging
 = true;

          

            //
 设置当前 box 的 id 为 moving_box

            if(document.getElementById("moving_box")
 !== null)
 {

                document.getElementById("moving_box").removeAttribute("id");

            }

            e.target.id
 = "moving_box";

          

            //
 计算坐标差值

            diffX
 = startX - e.target.offsetLeft;

            diffY
 = startY - e.target.offsetTop;

        }

        else {

            //
 在页面创建 box

            var active_box
 = document.createElement("div");

            active_box.id
 = "active_box";

            active_box.className
 = "box";

            active_box.style.top
 = startY + 'px';

            active_box.style.left
 = startX + 'px';

            document.body.appendChild(active_box);

            active_box
 = null;

        }

    };

           

    //
 鼠标移动

    document.onmousemove
 = function(e)
 {

        //
 更新 box 尺寸

        if(document.getElementById("active_box")
 !== null)
 {

            var ab
 = document.getElementById("active_box");

            ab.style.width
 = e.pageX - startX + 'px';

            ab.style.height
 = e.pageY - startY + 'px';

        }

           

        //
 移动，更新 box 坐标

        if(document.getElementById("moving_box")
 !== null &&
 dragging) {

            var mb
 = document.getElementById("moving_box");

            mb.style.top
 = e.pageY - diffY + 'px';

            mb.style.left
 = e.pageX - diffX + 'px';

        }

    };

           

    //
 鼠标抬起

    document.onmouseup
 = function(e)
 {

        //
 禁止拖动

        dragging
 = false;

        if(document.getElementById("active_box")
 !== null)
 {

            var ab
 = document.getElementById("active_box");

            ab.removeAttribute("id");

            //
 如果长宽均小于 3px，移除 box

            if(ab.offsetWidth
 < 3 || ab.offsetHeight < 3) {

                document.body.removeChild(ab);

            }

        }

    };

};

</script>

</head>

<body>

<p>点击鼠标左键并拖动绘制矩形</p>

</body>

</html>