js实现拖拽功能

最新推荐文章于 2025-03-13 00:57:17 发布

尼古拉斯-阳

最新推荐文章于 2025-03-13 00:57:17 发布

阅读量157

点赞数 2

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_45020437/article/details/90732308

版权

js 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用HTML、CSS和JavaScript实现div元素的拖拽功能，包括设置div的绝对定位，通过onmousedown和onmousemove事件捕捉鼠标点击并跟随鼠标移动，同时设置边界避免div移出可视区域。

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

如图实现div拖拽功能

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽功能</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;//设置绝对定位，相对于最近的已定位祖先元素
        }
            
        
    </style>
</head>
<body>
    <div id="div1"></div>
    <script>
        var oDiv=document.getElementById("div1");
        oDiv.onmousedown=function (e) {
            var ileft=e.clientX -this.offsetLeft;//找到鼠标点击div的位置
            var itop=e.clientY - this.offsetTop;
            document.onmousemove =function (e) {//此处不能使用oDiv,否则跟不上事件响应

                var divLeft= e.clientX - ileft;//计算div移动事件触发后，div的位置
                var divTop = e.clientY - itop;

                if(divLeft>document.documentElement.offsetWidth-oDiv.offsetWidth){//设置左右边界问题
                    divLeft=document.documentElement.offsetWidth-oDiv.offsetWidth;
                }else if (divLeft<0){
                    divLeft=0;
                }
                if(divTop>window.innerHeight-oDiv.offsetHeight){//设置上下边界问题
                    divTop=window.innerHeight-oDiv.offsetHeight;
                }else if (divTop<0){
                    divTop=0;
                }

                oDiv.style.left=divLeft+"px";//设置div的具体位置
                oDiv.style.top=divTop+"px";
            }
            oDiv.onmouseup=function () {//清除鼠标移动事件
                document.onmousemove = null;
            }
        }

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