简单的鼠标拖动效果

最新推荐文章于 2022-04-27 13:41:56 发布

duenyang

最新推荐文章于 2022-04-27 13:41:56 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/duenyang/article/details/52397588

版权

使用js实现简单的鼠标拖动效果，但此部分代码有个小小的BUG，后期改进好我会写进来，但基本的效果已经实现，请大家参考。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移动</title>
    <style>
    #box{
        width: 50px;
        height: 50px;
        position: relative;
        background-color: green;
        top: 50px;
        left: 50px;
        cursor: move;
    }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box=document.getElementById('box');
        var x=0,y=0,boxx=0,boxy=0,ex=0,ey=0,isDown=true;
        box.onmousedown=function(ev){
             var e=ev||window.event;
                ex=e.clientX-box.offsetLeft;
                ey=e.clientY-box.offsetTop;
            box.onmousemove=function(ev){
                var e=ev||window.event;
                    x=e.clientX-ex;
                    y=e.clientY-ey;
                    box.style.left=x+'px';
                    box.style.top=y+'px';
                    console.log(x);
                    console.log(y);
            }
         }
         box.onmouseup=function(){
            box.onmousemove='null';
        }
    </script>
</body>
</html>

duenyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的鼠标拖动效果

使用js实现简单的鼠标拖动效果，但此部分代码有个小小的BUG，后期改进好我会写进来，但基本的效果已经实现，请大家参考。DOCTYPE html>html lang="en">head> meta charset="UTF-8"> title>鼠标移动title> style> #box{ width: 50px;
复制链接

扫一扫