聊天窗口拖拽 | 边界检测 | 元素在移动到边缘外松开鼠标后，移动到边缘范围内最边上的位置

整体思路为：鼠标移动后的位置 - 鼠标初始位置 为 偏移量，然后将x，y的偏移量传入translate3d中。

其中有一个注意的点：offsetX和offsetY在第一次拖拽后值就不再为0，但是为什么之后还能成功拖拽呢？大概率是因为translate3d设置的是与初始位置的相对位置。

document.addEventListener('DOMContentLoaded', function () {
  let draggableDiv = document.querySelector('.chat');
  let isDragging = false;
  //  初始位置             偏移量
  let initialX, initialY, offsetX = 0, offsetY = 0;
  draggableDiv.querySelector('.chatHeader').addEventListener('mousedown', function (e) {
    isDragging = true;
    initialX = e.clientX - offsetX;
    initialY = e.clientY - offsetY;
    if (e.target === draggableDiv) {
      e.preventDefault();
    }
  });
  window.addEventListener('mousemove', function (e) {
    if (!isDragging) return;
    e.preventDefault();
    offsetX = e.clientX - initialX;
    offsetY = e.clientY - initialY;
    setTranslate(offsetX, offsetY, draggableDiv);
  });
  window.addEventListener('mouseup', function () {
    if (!isDragging) return;
    isDragging = false;
  });
  function setTranslate(xPos, yPos, el) {
    el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
  }
});

  /**

     * 目前的问题是：getBoundingClientRect方法和div.offsetLeft都无法准确获取相对于视口顶部的位置

     * getBoundingClientRect的top值一直为0，offsetLeft的只开始为0，后来为600。

     * 猜测着可能是因为translate3d导致的，translate3d可能没有真正改变div的初始位置。

     * 之后可以在html5和css3中详细了解这部分的内容。

     *

    */