js div的拖拽

最新推荐文章于 2023-11-21 14:45:58 发布

海龟先生plus

最新推荐文章于 2023-11-21 14:45:58 发布

阅读量127

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_45219069/article/details/94466943

版权

js 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

   <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            position: absolute;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        //要实现div的拖拽。
        //1，在div上按下鼠标，获取它的坐标值，然后移动时候，把获取的坐标值再赋值给定位元素的top,left
        //最后清除鼠标抬起
        var box=document.querySelector(".box")
        box.onmousedown=function(){//设置鼠标按下的事件
             document.onmousemove=function(event){//设置鼠标移动事件，并且传入event(clientX,Y是属于event的)
             //,document相当于获取 鼠标距离窗口左边和上边的距离
                var event = event || window.event;//event的兼容
                var x=event.clientX         //x---left
                var y=event.clientY         //y---top
               box.style.top=y+"px"         //赋值
               box.style.left=x+"px"
            }
        box.onmouseup=function(){       //清除移动的
            document.onmousemove=null
            box.onmouseup=null
        }
            
        }
    </script>
</body>

在这里插入图片描述

海龟先生plus

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js div的拖拽

<style> *{ margin: 0px; padding: 0px; } .box{ width: 200px; height: 200px; background-color: gold; ...
复制链接

扫一扫

专栏目录