js 拖拽元素 鼠标速度过快元素跟不上

自己写一个拖拽元素，使用js拖拽元素时，鼠标速度过快时 元素跟不上鼠标

参考了网上的文章 ，里面对比了绑定到 body和document上的不同点js 拖拽元素 鼠标速度过快问题
明白过来是因为速度过快而导致，鼠标脱离了小盒子box的范围
问题代码：

 <div class="box"></div> //html
    <script>
      let box = document.querySelector('.box');
      box.onmousedown = function (ev) {
        let disX = ev.pageX - box.offsetLeft;
        let disY = ev.pageY - box.offsetTop;
        box.onmousemove = function (e) {
          box.style.left = e.clientX - disX + 'px';
          box.style.top = e.clientY - disY + 'px';
        };
      };
      document.onmouseup = function () {
        box.onmousemove = null;
        box.onmouseup = null;
      };
    </script>

如何解决？ 把move操作绑定到document上（我的body大小为0），这时候就以整个document为板，拖到那里都不会脱离。都可以触发move函数。
上代码

 <script>
      let box = document.querySelector('.box');
      box.onmousedown = function (ev) {
        let disX = ev.pageX - box.offsetLeft;
        let disY = ev.pageY - box.offsetTop;
        document.onmousemove = function (e) {
          box.style.left = e.clientX - disX + 'px';
          box.style.top = e.clientY - disY + 'px';
        };
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        box.onmouseup = null;
      };

git动图软件直通车：ScreenToGif 刚刚开始用感觉相当不错。以后的博客再也不会没动图了，多直观，多易理解