SOURCE

// 封装拖拽函数
function move(){
    // 获取元素
    let drag=document.getElementById("drag");
    // 触发三个函数 mousedown mousemove mouseup
    // mousedown()
    drag.addEventListener('mousedown',mousedown,false);
    // mousemove()
    drag.addEventListener('mousemove',mousemove,false);
    // mouseup()
    drag.addEventListener('mouseup',mouseup,false);

    // 标识
    let tag = false;
    // mousedown
    function mousedown(e){
        tag=true;
        // 记录鼠标距物体左侧的位置
         diffX = e.clientX-this.offsetLeft;
        // 记录鼠标距离物体顶部的位置
         diffY = e.clientY-this.offsetTop;
    }

    // mousemove
    function mousemove(e){
       if(tag){
        // 移动后物体的位置
        let left=e.clientX-diffX;
        let top = e.clientY-diffY;
       
        // 判断物体的边界
        if(left<0){
            left=0;
        }else if(left>window.innerWidth-this.offsetWidth){
            left = window.innerWidth-this.offsetWidth;
            
        }else{
             console.log(left);
            drag.style.left=left+'px';
        }
        if(top<0){
            top=0;
        }else{
            drag.style.top=top+'px';
        }
       }
    }

    // mouseup
    function mouseup(){
        // 取消移动
        tag=false;
    }
}
move(drag);

<div class="box" id="drag">拖拽我</div>

.box{
    width:100px;
    height:100px;
    background-color:pink;
    cursor: move;
    text-align: center;
    line-height: 100px;
    position: absolute;
}