Javascript实现拖拽效果

最新推荐文章于 2025-04-24 16:08:48 发布

✪憑星月✪

最新推荐文章于 2025-04-24 16:08:48 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript学习笔记文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_61716556/article/details/122549268

javascript学习笔记专栏收录该内容

17 篇文章

订阅专栏

本文详细阐述了如何使用JavaScript实现页面元素的拖拽功能，包括onmousedown、onmousemove和onmouseup事件的处理，以及如何计算并调整元素位置以实现流畅的拖动效果。重点讲解了防止元素位置跳跃的方法和关键属性的应用。

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

我们执行拖拽操作时，

1.按住某元素

2.移动鼠标

3.移动鼠标到相应位置后松开鼠标

基于以上操作，页面拖拽效果需要三个事件

onmousedown
onmousemove
onmouseup

在onmousedown事件中，我们需要定义函数表明，该元素被按住，即将进行移动操作，需要计算x坐标值，并触发后续的onmousemove事件。

在onmousemove事件中，我们需要计算元素坐标位置，根据鼠标移动改变元素位置，准备执行鼠标松开时的事件函数。

在onmouseup事件中，我们需要以最终鼠标确定的位置为元素的最终位置，并且终止onmousemove事件。

注意：常规流元素不能够自由移动位置，设置定位后可以通过left,top等属性移动位置。

位置计算需要clientX,clientY,offsetX,offsetY等事件相关属性。

如果将left的值直接设置为event.clientX的话，鼠标位置在哪里，元素的最左侧就会跟着鼠标在哪里。这样的话，鼠标位置永远都是元素左侧。在按下鼠标时计算鼠标与元素位置的差值，然后在后续onmousemove处理中把这个差值加上，就可以使鼠标位置达到元素内部，并且在移动过程中不会改变。

代码如下

<!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>
        #di{
            width:100px;
            height:100px;
            background-color: #4c4c4c;
            position: relative;
            /*设置绝对定位或者相对定位是必要的*/
        }
    </style>
    <script>
        //window.onload=function(){}这里是为了使html页面加载完毕后再加载js代码，
        //否则获取元素步骤发生在元素产生之前，元素获取会失败
        window.onload=function(){
            //获取元素
            var d2=document.getElementById("d2");
            //以下为函数主体部分
            di.onmousedown=function(){
            //这里解释：event.clientX是鼠标位置相对于浏览器窗口左上角的差距像素值
            //offsetLeft是事件元素相对于浏览器窗口的定位位置,如果被某个定位元素包含，left会相对于那个定位元素，而不是document页面
            var disx=event.clientX-di.offsetLeft;
            var disy=event.clientY-di.offsetTop;
            //以下内容看不懂可以直接注释掉正常实现方式，使用发生跳跃的实现方式，然后就会发现
            //这里在按下鼠标时记录鼠标位置相对于元素的位置的差,防止每次开始拖拽时鼠标位置突然变成元素的一边。
            //这里设置left值为event.clientX,就可以看到不协调的元素跳跃，下面通过注释代码可以直接看到效果
            document.onmousemove=function(){
                di.style.left=event.clientX-disx+"px";//这里是正常表现效果的实现方式
                // di.style.left=event.clientX+"px";//这里是发生跳跃的不恰当的实现方式
                di.style.top=event.clientY-disy+"px";
            };
            document.onmouseup=function(){
                document.onmousemove=null;
                //这里把移动元素的状态去掉，停止拖拽。
            }
        }
        }
    </script>
</head>
<body>
    <div id="di">
    </div>
</body>
</html>