9.6 拖拽功能的实现

功能实现：主要通过三个事件来实现拖拽功能的 onmousesown 鼠标按下，onmousemove鼠标移动，onmouseup 鼠标弹起。
**注意点：**三个事件添加的对象是不一样的，onmousesown是添加在要拖拽的元素上，另外两个事件是添加在document上，还有就是对距离的处理
e.page //相对于浏览器的坐标

核心代码：

 function drag(root) { //root：需要拖拽的元素
   root.onmousedown = function (e) {
      var xLen = root.offsetLeft;
      var yLen = root.offsetTop;
      var x = e.pageX - xLen;
      var y = e.pageY - yLen;
      // 鼠标移动
      document.onmousemove = function (e) {
          // console.log('鼠标移入');
          console.log(e.offsetX);
          console.log(e.offsetY);
          var left = e.pageX - x;
          var top = e.pageY - y;
          // 处理边界值
          if (left < 0) {
              left = 0;
          } else if (left > 1166) {
              left = 1166 + 'px'
          } else {
              left += 'px';
          }
          if (top < 0) {
              top = 0;
          } else if (top > 425) {
              top = 425 + 'px'
          } else {
              top += 'px';
          }
          root.style.top = top;
          root.style.left = left;
      }
    }
    document.onmouseup = function () {
        document.onmousemove = null;
    }
}