SOURCE

console 命令行工具 X clear

                    
>
console
let div = document.getElementsByClassName('box')[0]

function drag(item){
    let style = getComputedStyle(item)
    let diffx,diffy,left,top
    if(style.position !== 'absolute'){
        item.style.position = 'absolute'
    }

    let downFlag = false;
    function onDragDown(e){
        console.log('鼠标落下')
        diffx = e.clientX - div.offsetLeft
        diffy = e.clientY - div.offsetTop
        downFlag = true;
    }
    function onDragUp(){
        console.log('鼠标抬起')
        downFlag = false;
    }
    function onDragMove(e){
        if(!downFlag){
            return
        }
        left = e.clientX - diffx
        top = e.clientY - diffy
        // 边界判断
        if(left < 0){
            left = 0
        }else if(left > window.innerWidth  - div.offsetWidth){
            left = window.innerWidth - div.offsetWidth
        }
        if(top < 0){
            top = 0
        }else if(top > window.innerHeight  - div.offsetHeight){
            top = window.innerHeight - div.offsetHeight
        }
        
        item.style.left = left + 'px'
        item.style.top = top + 'px'
        
        
    }
    
    item.addEventListener('mousedown',onDragDown)
    document.addEventListener('mousemove',onDragMove)
    document.addEventListener('mouseup',onDragUp)
}

drag(div)
<div class="box">
    
</div>
<div class="box2">
    
</div>
*{
    padding: 0;
    margin: 0;
}
.box{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: lavender
}
.box2{
    position: absolute;
    left: 200px;
    width: 200px;
    height: 200px;
    background-color: lawngreen
}