JS——实现拖拽效果

甜甜酷盖

已于 2022-04-12 22:01:30 修改

阅读量457

点赞数 2

分类专栏： JS 文章标签： javascript 前端开发语言

于 2022-02-15 15:05:07 首次发布

本文链接：https://blog.csdn.net/weixin_52148548/article/details/122943665

版权

JS 专栏收录该内容

31 篇文章 8 订阅

订阅专栏

思路
代码

思路

鼠标在盒子上按下时，准备移动（事件加给物体）
鼠标移动时，盒子跟随鼠标移动（事件添加给页面）
鼠标抬起时，盒子停止移动（事件加给页面）

代码

<style>
    div{
        height: 80px;
        width: 80px;
        background-color: darksalmon;
        margin: auto;
        position: absolute;
    }
</style>
<body>
    <div>     
    </div>
    <script>
        let div=document.querySelector('div')
        //鼠标按下 记录鼠标点击的点的坐标值
        div.onmousedown=function(event1){ 
        //offsetX,offsetY,鼠标点击位置到鼠标点击元素最左边的距离            
            let X=event1.offsetX;
            let Y=event1.offsetY;
            //鼠标移动 及时记录左上角的位置
            //left和top定位针对的是元素左上角的位置
            //clientX,clientY,鼠标点击的点到浏览器最左边的距离
            document.onmousemove=function(event){
                div.style.left=event.clientX-X+'px'
                div.style.top=event.clientY-Y+'px'
            }
            //鼠标弹起 解绑事件
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }           
        }
    </script>
</body>

在这里插入图片描述

甜甜酷盖

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS——实现拖拽效果

思路代码思路鼠标在盒子上按下时，准备移动（事件加给物体）鼠标移动时，盒子跟随鼠标移动（事件添加给页面）鼠标抬起时，盒子停止移动（事件加给页面）代码<style> div{ height: 80px; width: 80px; background-color: darksalmon; margin: auto; position: absolute; }</style>.
复制链接

扫一扫

专栏目录