盒子拖动案例

我的调皮小妖精…

已于 2022-04-06 22:11:00 修改

阅读量358

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript visualstudio

于 2022-04-06 22:03:05 首次发布

本文链接：https://blog.csdn.net/weixin_45753588/article/details/124001405

js 专栏收录该内容

7 篇文章

订阅专栏

本文通过一个简单的盒子拖动案例，介绍了JavaScript中onmousedown事件的应用。文章详细讲解了实现拖动功能的步骤，并提供了代码示例。

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

js

前言

 以下是鼠标事件，点击盒子拖动。

#一、使用步骤

1.代码如下

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box1 { 
            background-color: chartreuse;
            position: fixed;
            top: 0;
            left: 0;

        }

        #box2 {
           
            background-color: crimson;
            position: fixed;
            top: 0;
            right: 0;

        }
        .box {
            width: 300px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="box1" class="box"></div>
    <div id="box2" class="box"></div>


    <script>
        document.querySelectorAll('.box').forEach(box => {
            box.onmousedown = function (e) {
                // console.log(e.clientX,e.clientY);//当时事件触发时，鼠标距离屏幕的xy轴距离
                // console.log(this.offsetLeft, this.offsetTop);//当前盒子距离屏幕xy轴的距离
                let disX = e.clientX - this.offsetLeft,
                     disY = e.clientY - this.offsetTop;

                document.onmousemove = function (e) {

                    let left = e.clientX - disX,
                        top = e.clientY - disY;

                    box.style.left = left + 'px';
                    box.style.top = top + 'px';
                }

                document.onmouseup = function(e){
                    document.onmousemove = null;
                    document.onmouseup = null;

                }
            }
        })
    </script>
</body>

</html>