拖拽功能的实现

.box {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
            top:50px;
            left:50px;
        }

<div class="box"></div>
    <script>
        var box = document.getElementsByClassName("box")[0];
        box.addEventListener("mousedown",function(e){
            //元素距离屏幕左、上边的距离
            var x1 = box.offsetLeft;
            var y1 = box.offsetTop;
            //鼠标距离页面的初始距离坐标
            var x2 = e.pageX;
            var y2 = e.pageY;
            document.addEventListener("mousemove",move);
            function move(e) {
                //元素初始的offsetLeft距离+鼠标移动的距离(当前鼠标坐标 - 初始鼠标坐标)
                box.style.left = x1 + e.pageX - x2 + "px";
                box.style.top = y1 + e.pageY - y2 + "px";
            }
            document.addEventListener("mouseup",function(){
                document.removeEventListener("mousemove",move);
            });
        });
    </script>
全部评论

相关推荐

不愿透露姓名的神秘牛友
07-07 14:00
不想多说了,什么逆天HR,还要教我礼貌😂
机械打工仔:这不纯傻卵吗,他还操心上别人老板了
投递BOSS直聘等公司7个岗位
点赞 评论 收藏
分享
点赞 评论 收藏
分享
06-26 15:33
青岛工学院 Java
积极的秋田犬要冲国企:他现在邀请我明天面试
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
07-07 13:46
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务