当单击时记录鼠标的初始位置。
当移动时，如果在拖拽就更新元素的left与top值。

逻辑是有问题的，正在拖拽的时候left与top的值为什么要减去初始值？
这在元素第一次被拖拽时是没有问题的，因为初始的left和top都是0。
可如果之后再拖拽的话，left与top又会回到0，因为你总是让当前鼠标的x与y坐标减去开始拖拽时候的x与y坐标。
在页面上，自然就是总会回到原处。

修改也很简单，你只要不减去初始的值就行了。

你在第一次触发 onmouseup 的时候将 onmouseup 和 onmousemove 事件都已经
觉得应该是这个原因吧

document.onmousemove= function (e) {
   if(!btn){return;}
    var left= e.clientX;
    var top= e.clientY;
    box1.style.left=left+'px';
    box1.style.top=top+'px';
}

    <p id="box1"></p>
    #box1{
        width: 20px;
        height: 20px;
        background: red;
        position: absolute;
    }
    
    var box1=document.getElementById('box1');
    var disX= 0;
    var disY= 0;
    var btn=false;
    box1.onmousedown= function (e) {
        disX= e.clientX;
        disY= e.clientY;
        btn=true;
    }
    
    document.onmousemove= function (e) {
       if(!btn){return;}
        var left= e.clientX;
        var top= e.clientY
        box1.style.left=left+'px';
        box1.style.top=top+'px';
    }
    document.onmouseup= function () {
        btn=false;
    }