console 命令行工具 X clear
console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>拖拽效果</title>
</head>
<style>
    .tz{
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        background-color: red
    }
</style>
<body>
    <div class="tz" id="tz"></div>
</body>
<script>
    var div = document.getElementById('tz')
    div.onmouseenter = function(e){
        let x = e.clientX
        let y = e.clientY
        let divX = div.offsetLeft
        let divY = div.offsetTop
        let countX = x - divX
        let countY = y - divY
        div.onmousedown	 = function(){
            // alert("333")
            document.onmousemove = function(e){
                // console.log(e)
                let endX = (e.clientX - countX) + 'px'
                let endY = (e.clientY - countY) + 'px'
                if(parseInt(endX) <= 0){
                    endX = 0
                    if(parseInt(endY) <= 0){
                        endY = 0
                    }
                }else if(parseInt(endY) >= document.offsetHeight){
                    endY = document.offsetWidth
                    if(parseInt(endX) >= document.offsetWidth){
                        endX = document.offsetWidth
                    }
                }
                div.style.left = endX
                div.style.top = endY
            }
        }
        div.onmouseup = function(){
            document.onmousemove = null
        }
        
    }
</script>
</html>