JS实现鼠标拖动

最新推荐文章于 2024-08-12 14:11:38 发布

猿分&

最新推荐文章于 2024-08-12 14:11:38 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 前端文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_52006379/article/details/126533295

前端同时被 2 个专栏收录

47 篇文章

订阅专栏

JavaScript

38 篇文章

订阅专栏

本文介绍了如何使用JavaScript来实现网页中的元素拖放功能，通过监听鼠标事件和更新元素位置，创建出互动性强的用户界面。同时，也探讨了CSS在拖放交互中的作用，如设置拖放效果。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
        #box {
          width: 200px;
          height: 100px;
          background-color: pink;
          position: absolute;
          left: 0px;
          top: 0px;
        }
      </style>
</head>
<body>
    <div id="box"></div>

    <script>
        const box=document.getElementById('box');
        
        box.onmousedown=function(event){

            
            console.log('boxOffsetX',event.offsetX);
            console.log('boxClientX',event.clientX);

            //鼠标基于box的坐标
            const boxOffsetX=event.offsetX;
            const boxOffsetY=event.offsetY;
            
            document.onmousemove=function(event){
                //鼠标基于浏览器的坐标
                const mouseX=event.clientX;
                const mouseY=event.clientY;

                //改变box的top和left
                box.style.top=mouseY-boxOffsetY+'px';//记得带单位
                box.style.left=mouseX-boxOffsetX+'px';
            }

            //鼠标抬起来就停止移动，并清除onmousemove的事件绑定
            box.onmouseup=function(){
                document.onmousemove=null
            }
        }
    </script>
</body>
</html>