原生JS实现拖拽

最新推荐文章于 2024-07-10 14:36:18 发布

Liuhfs

最新推荐文章于 2024-07-10 14:36:18 发布

阅读量88

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/Liuhfs/article/details/109681867

版权

JavaScript 拖拽效果事件监听鼠标坐标元素定位

关键词由CSDN通过智能技术生成

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用js实现拖拽效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(22, 240, 240);
            position: absolute;/*浮动*/
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <script>
        let box=document.querySelector('.box')
        let ismove=false;//是否可以移动
        let offset={};
        box.addEventListener('mousedown',(e)=>{//鼠标按下事件
            offset={
                x:e.offsetX,//获取到鼠标按下的位置
                y:e.offsetY,
            }
            ismove=true//可以移动
        });
        document.addEventListener('mousemove',(e)=>{//鼠标移动事件
            if(ismove){//判断是否可以移动
                box.style.left=e.pageX-offset.x+'px'//改变box的位置
                box.style.top=e.pageY-offset.y+'px'
            }
        })
        document.addEventListener('mouseup',()=>{//鼠标抬起事件
            ismove=false//鼠标抬起是停止移动
        })
    </script>
</body>
</html>

Liuhfs

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现拖拽

使用js实现拖拽效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{
复制链接

扫一扫