拖拽功能的实现

.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>