一、写在前面
如果我们想要实现拖拽的功能，必须要知道三个事件：
1、onmousedown：鼠标按下事件
2、onmousemove：鼠标移动事件
3、onmouseup：鼠标抬起事件
二、实现思路

我们当左键点击时，需要记录当前的鼠标点击位置相对于该元素左上角的x，y坐标，
这里我们使用diffX和diffY来表示。然后我们移动时需要不断计算当前元素距离浏
览器左边和上边的距离。然后给元素进行赋值。当鼠标抬起时，然后取消鼠标移动事
件和鼠标抬起事件。

三、代码

<div id="drag"></div>

* {
      margin: 0px;
      padding: 0px;
    }
    #drag {
      width: 200px;
      height: 200px;
      background: red;
      cursor: pointer;
      position: absolute;
    }

<script>

    window.onload = function() {
      //获取drag元素
      let drag = document.getElementById("drag")
      //当鼠标按下时
      drag.onmousedown = function(e) {
        //做到浏览器兼容
        e = e || window.event  
        let diffX = e.clientX - drag.offsetLeft
        let diffY = e.clientY - drag.offsetTop
        //当拉着box移动时
        document.onmousemove = function(e) {
          // 浏览器兼容
          e = e || window.event
          let left = e.clientX - diffX
          let top = e.clientY - diffY

          if(left < 0) {
            left = 0
          }else if(left > window.innerWidth - drag.offsetWidth){
            left = window.innerWidth - drag.offsetWidth
          }

          if(top < 0) {
            top = 0
          }else if(top > window.innerHeight - drag.offsetHeight) {
            top = window.innerHeight - drag.offsetHeight
          }

          drag.style.left = left + 'px'
          drag.style.top = top + 'px'
        }

        // 当鼠标抬起时
        document.onmouseup = function(e) {
          this.onmousemove = null
          this.onmouseup = null
        }
      }
    }
  </script>