拖拽功能的实现

.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>
全部评论

相关推荐

ohs的小木屋:比不少实习待遇高了
点赞 评论 收藏
分享
点赞 评论 收藏
分享
屌丝逆袭咸鱼计划:心态摆好,man,晚点找早点找到最后都是为了提升自己好进正职,努力提升自己才是最关键的😤难道说现在找不到找的太晚了就炸了可以鸡鸡了吗😤早实习晚实习不都是为了以后多积累,大四学长有的秋招进的也不妨碍有的春招进,人生就这样
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

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