SOURCE

console 命令行工具 X clear

                    
>
console
window.onload=function (ev) {
        var oDiv = document.getElementById("div")
        oDiv.onmousedown = function(event){
            var event = event || window.event;  //兼容IE浏览器
            //    鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
            var diffX = event.clientX - oDiv.offsetLeft;
            var diffY = event.clientY - oDiv.offsetTop;
            if(typeof oDiv.setCapture !== 'undefined'){
                oDiv.setCapture();
            }
            document.onmousemove = function(event){
                var event = event || window.event;
                var moveX = event.clientX - diffX;
                var moveY = event.clientY - diffY;
                if(moveX < 0){
                    moveX = 0
                }else if(moveX > window.innerWidth - oDiv.offsetWidth){
                    moveX = window.innerWidth - oDiv.offsetWidth
                }
                if(moveY < 0){
                    moveY = 0
                }else if(moveY > window.innerHeight - oDiv.offsetHeight){
                    moveY =  window.innerHeight - oDiv.offsetHeight
                }
                oDiv.style.left = moveX + 'px';
                oDiv.style.top = moveY + 'px'
            }
            document.onmouseup = function(event){
                this.onmousemove = null;
                this.onmouseup = null;
                //修复低版本ie bug
                if(typeof oDiv.releaseCapture!='undefined'){
                    oDiv.releaseCapture();
                }
            }
        }
    }
<div id="div" class="box">点击我拖动</div>
.box {
        width: 100px;
        height: 100px;
        background: #ffb72e;
        border-radius: 50%;	
        position: absolute;
        text-align: center;
        line-height: 100px;
        user-select: none;
    }