拖拽原理

最新推荐文章于 2021-11-13 11:51:07 发布

原创最新推荐文章于 2021-11-13 11:51:07 发布 · 767 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个简单的HTML页面中实现元素拖拽的方法。通过监听鼠标的按下(onmousedown)、移动(onmousemove)及释放(onmouseup)事件，使指定的div元素可以在页面内自由拖动。首次拖动时将自动设置元素的位置属性。

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

拖拽原理

1.鼠标按下+鼠标移动 = 拖拽事件 onmousedown + onmousemove

2.鼠标松开 = 无拖拽停止拖拽 onmouseup

3.鼠标偏移 = 拖拽距离

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color:greenyellow;
        }
    </style>
</head>
<body>
        <div class="box"></div>
        <script>
            var box=document.getElementsByTagName("div");
            drag(box[0]);
            function drag(elem){
                var oldX,oldY,newX,newY;
                elem.onmousedown=function(e){
                    //相对定位的拖拽div
                    this.style.position="relative";
                    if(!this.style.left && !this.style.top){
                    //第一次设置left、top为0
                        this.style.left = 0;
                        this.style.top = 0;
                    }
                    var oldX= e.clientX;
                    var oldY= e.clientY;
                    document.onmousemove=function(e){
                        newX= e.clientX;
                        newY= e.clientY;
                        elem.style.left=parseInt(elem.style.left)+newX-oldX+"px";
                        elem.style.top=parseInt(elem.style.top)+newY-oldY+"px";
                        oldX=newX;
                        oldY=newY;
                    }
                    document.onmouseup=function(){
                        document.onmousemove=null;
                        document.onmousedown=null;
                    }

                }

            }
        </script>
</body>
</html>